<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Styled links</title>
    <style>
    body {
      width: 300px;
      margin: 0 auto;
      font-family: sans-serif;
    }

    p {
      line-height: 1.4;
    }

    a {
      outline: none;
      text-decoration: none;
      padding: 2px 1px 0;
    }

    a:link {
      color: #265301;
    }

    a:visited {
      color: #437A16;
    }

    a:focus {
      border-bottom: 1px solid;
      background: #BAE498;
    }

    a:hover {
      border-bottom: 1px solid;     
      background: #CDFEAA;
    }

    a:active {
      background: #265301;
      color: #CDFEAA;
    }
    </style>
  </head>
  <body>
    <p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
  </body>
</html>