Search code examples
csspseudo-class

Font size will change during focus using css?

When I am focusing on link a elements then the only font size is not changing bt I want to change the font size whenever I focus on link a elements of html code...

CSS:

a:focus {
  outline-color: ;
  background-color: aqua;
  font-size: 27px;
}

HTML:

<ul>
  <li><a href="">home</a></li>
  <li><a href="">h</a></li>
  <li><a href="">m</a></li>
</ul>
Solution

  • Not sure what is problem? When I replicate youre code its work just fine. Try adding '#'(dummy-link) to links href attribute

    <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">Contact</a></li>
</ul> 

a:focus
    {
        outline-color: none;
        background-color: aqua;
        font-size: 27px;

    }