How can I highlight text within an element upon hover, rather than the whole element and its padding? CSS/HTML

Question

I'm trying to achieve a certain hover effect for my navbar text which is probably better shown than explained.

The desired effect:

https://i.imgur.com/sSJyeg9.png

What I'm getting:

https://i.imgur.com/fZ3z3ap.png

My Code:

 ul { list-style-type: none; position: static; margin: 0% 30%; padding: 0; overflow: hidden; border-top: 6px double black; border-bottom: 6px double black; } li { float: left; } li a { display: block; color: black; padding: 22px 20px; text-align: center; text-decoration: none; } a.one:link { text-decoration: none; color: rgb(0, 0, 0); } a.one:visited { text-decoration: none; color: rgb(0, 0, 0) } a.one:hover { text-decoration: none; background-color: #f7c576 } a.one:active { text-decoration: none; }

 <nav> <ul> <li><a class="one" href="#">HOME</a></li> <li><a class="one" href="#">ABOUT</a></li> <li style="float: right"><a class="one" href="#">DONATE</a></li> <li style="float: right"><a class="one" href="#">MAGAZINE</a></li> </ul> </nav>

Answer 1

Because on hover, you are targeting a which has padding and it's calculated from a whole size, so easily move the padding: 22px 20px; under li a and put it inside li .

 ul { list-style-type: none; position: static; margin: 0% 30%; padding: 0; overflow: hidden; border-top: 6px double black; border-bottom: 6px double black; } li { float: left; padding: 22px 20px; } li a { display: block; color: black; text-align: center; text-decoration: none; } a.one:link { text-decoration: none; color: rgb(0, 0, 0); } a.one:visited { text-decoration: none; color: rgb(0, 0, 0) } a.one:hover { text-decoration: none; background-color: #f7c576 } a.one:active { text-decoration: none; }

 <nav> <ul> <li><a class="one" href="#">HOME</a></li> <li><a class="one" href="#">ABOUT</a></li> <li style="float: right"><a class="one" href="#">DONATE</a></li> <li style="float: right"><a class="one" href="#">MAGAZINE</a></li> </ul> </nav>