Cool Navigation Bar Link Hover Effect

Centering Navigation Bar:

Coming to the CSS Section, We start by getting rid of paddings and margins that are added to our document by default. Now, let us centre the <nav> element. You can use any method of your choice to center the Navigation Bar, but here I am using flex layout as I find it most easy to use and best suited when dimensions of the container and its content are both unknown. We set the background to a darker shade of blue with hex code #0a1e29.

body {
   background-color: #0a1e29;
   padding: 0;
   margin: 0;
   height: 100vh;
   width: 100vw;
   display: flex;
   align-items: center;
}

Styling for <nav> element:

We want the Navigation bar to occupy all the width of screen viewport; hence, we set the width of <nav> to 100vw.

nav {
   width: 100vw;
}

Removing the Bullet Points:

Next, we get rid of bullets preceding each of the list items by assigning ‘none’ value to the ‘list-style-type’. Once again, we use flex to center and space the list items within the <nav> element.

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   align-items: center;
   flex-direction: row;
   justify-content: space-around;
}

Styling the List Items:

We relatively position each of List Items with a padding of 20px on the left and right side of <li> element.

li {
   position: relative;
   padding: 0 20px;
   height: 100%;
   display: flex;
}

Basic Typography and Styling for Hyperlinks:

Coming to the anchor tags, we need them to be on top of the stack order all the time, so we set the z-index to 1, which is relatively a higher number than other elements.And finally, we add some basic typography styling to make the text more readable.

a {
   z-index: 1;
   color: white;
   text-decoration: none;
   font-family: 'Poppins',sans-serif;
   font-weight: 500;
   font-size: 18px;
   padding: 10px 5px;
}

Pseudo-Elements:

We now need three pseudo-elements li:before, li:after and a:before to create the three blue lines that highlight the hyperlink on hover. Each of these pseudo-elements must consist of a ‘content’ attribute for proper functioning. We then set the height of each pseudo-element to 33.33% that is 1/3rd of the height of <li>. We want them to remain hidden until the hyperlinks are hovered; hence, we set the width to 0.

For positioning, we use absolute positioning. We alternate the direction of sliding in the pseudo-elements by setting li:before to left:0 and setting li:after and li:before to right:0. Lastly, we add 0.5s to the transition attribute to make sure the transitions are smooth.

li::before {
   content: "";
   position: absolute;
   height: 33.33%;
   width: 0;
   background-color: #0D7CFF;
   right: 0;
   z-index: 0;
   top: 33.33%;
   transition: all 0.5s;
}
li::after {
   content: "";
   position: absolute;
   height: 33.33%;
   width: 0;
   background-color: #0D7CFF;
   left: 0;
   z-index: 0;
   bottom: 0;
   transition: all 0.5s;
}
a::before {
   position: absolute;
   content: "";
   height: 33.33%;
   width: 0;
   background-color: #0D7CFF;
   bottom: 66.66%;
   left: 0;
   transition: all 0.5s;
}

Adding the Hover Effect:

And for the final most step of this tutorial, we add hover state to the <li> element. On Hovering the <li> element, the width of pseudo-element is changed to 100% covering up and highlighting the entire list item. And we are done with the hover effect! Our stunning Navigation Bar Hover Effect is now ready. You can now play around with colors and styling to customize the Navigation Bar even more.

li:hover:before,
li:hover::after,
li:hover a::before{
   width: 100%;
}