Escrito por Fernando Cueto

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;
 }

7 comentarios sobre “Underline Effect to Menu-items with CSS”

  2. You actually make it seem so easy with your presentation but I find this topic to be actually something that I think I would never understand. It seems too complicated and extremely broad for me. I am looking forward for your next post, I’ll try to get the hang of it!

  4. I would like to show some appreciation to the writer for rescuing me from such a setting. As a result of searching throughout the world wide web and finding opinions which were not helpful, I believed my entire life was over. Being alive without the presence of answers to the problems you have sorted out through this guideline is a critical case, as well as the kind that might have in a wrong way affected my entire career if I had not come across your site. Your own personal expertise and kindness in controlling all the stuff was priceless. I don’t know what I would’ve done if I hadn’t come upon such a solution like this. It’s possible to now look ahead to my future. Thanks for your time very much for your reliable and effective guide. I will not be reluctant to propose the sites to any person who should have counselling about this problem.

Deja un comentario