Menu Responsivo Underline Reverso

Menu Responsivo Underline Reverso

Neste artigo eu vou amostra como fazer um menu com efeito underline reverso com css

Vamos Adicionar o Html:

<nav class="menu-underline">
  
    <ul>
   
        <li><a href="#" class="line"><i class="icon-home"></i> <span>Home</span></a></li>
        <li><a href="#" class="line"><i class="icon-user-1"></i> <span>Sobre</span></a></li>
        <li><a href="#" class="line"><i class="icon-book"></i>  <span>Artigos</span></a></li>
        <li><a href="#" class="line"><i class="icon-mail-read"></i> <span>contato</span></a></li>
   
   </ul>

</nav>

Vamos Adicionar o Css:

.menu-underline {

   background:#fff; 
   box-shadow: 1px 0px 1.2px 0px #e3e3e3; 
   border-radius:3px; 
   padding:5px; 

}

.menu-underline ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-flow: row wrap;
}

.menu-underline li {
  padding: 0.8em 1.5em;
}

.menu-underline a {

  font-family: 'open_sansregular';
  text-decoration: none;
  position: relative;
  color:#0087ff;
  font-size:1.2em;
  padding: 10px 0;
  transition: 0.3s;
}

.menu-underline a:hover { color:#4c4c4c; }

.menu-underline .line::after {
  content: "";
  border-bottom: solid 2px #0087ff;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.25s;
}

.menu-underline .line:hover::after {
  border-bottom: solid 2px #4c4c4c;
  transform-origin: left;
  transform: scaleX(1);
}

@-webkit-keyframes line {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes line {

  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }

}

@media only screen and (max-width:768px) {

  .menu-underline li { width:100%; text-align:center; margin-bottom:15px; }

}

Veja o Resultado!

Baixar Código Veja Funcionando