Underline Effect to Menu-items with CSS

Step 1: Write the nav menu structure:

<ul class="nav-links">
  <li class="li-box"><a class="a-menu-item" href="">Inicio</a></li>
  <li class="li-box"><a class="a-menu-item" href="">Curaduría</a></li>
  <li class="li-box"><a class="a-menu-item" href="">Servicios</a></li>
  <li class="li-box"><a class="a-menu-item" href="">Documentos</a></li>
  <li class="li-box"><a class="a-menu-item" href="">Contacto</a></li>
</ul>

Step 2: On your css file, we’re going to define the height of the a tag (I’m using a class called li-box).

.li-box{
   list-style: none;
   padding-left: 15px;
   padding-right: 15px;
   height: 20vh;
 }

Step 3: Set the line height to fit with the same hight of the li element. Set position relative and display inline-block, this is for the underline be visible.

.a-menu-item{
   color: rgb(255, 103, 64);
   text-decoration: none;
   letter-spacing: 3px;
   font-weight: bold;
   font-size: 14px;
   line-height: 20vh;
   position: relative;
   display: inline-block;
 }

Step 4: Use the selector after from the a tag and set the features of the underlined we want to show. Content empty string, position absolute, top and left, the height of the underlined and width, the color of the line (background-color) and a transition for getting a smooth movement.

.a-menu-item:after{
   content: "";
   position: absolute;
   top: 85%;
   height: 2px;
   width: 40%;
   left: 30%;
   background-color: rgba(255, 103, 64, 0.6);
   transition: 0.4s ease-out all .1s;
 }

Step 5: We have to modify the a tag using the after selector when we hover on li element. Here we’re going to modify the width and initial position on x axis (left), and a transition for a better result.

.li-box:hover .a-menu-item::after {
   width: 90%;
   left: 5%;
     transition: 0.5s ease all;
 }

2 comentarios sobre “Underline Effect to Menu-items with CSS

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *