Link Animado com – CSS Pseudo-elemento ::AFTER

Link Animado com – CSS Pseudo-elemento ::AFTER

Neste artigo vamos criar um LINK animado com Pseudo-elemento ::AFTER

::after cria um pseudo-elemento que é o último filho do elemento selecionado.

Eu vou adicionar o conteúdo de um elemento como a propriedade content.

a::after { content: “”; }

Vamos adicionar o html

Crei uma classe chamada link na div, e dentro da div temos o href.

<div class="link"><a href="#"> Leia mais...</a></div>

Agora vamos adicionar o Css:

.link{ 

    width:105px; 
    height:auto; 
    float:lefet 

}

.link { 

    position: relative; 
    color: #4c4c4c; 
    text-decoration:none; 
    font-family:'open_sansregular';
    font-weight: bold;  
    font-size:1.2em; 

}

.link:after {

  display: block;
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height:1px;
  background-color: #4c4c4c;
  content: "";
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;

}

.link a           { text-decoration:none; color:#4c4c4c;} 
.link a:hover     { color: #0096b9;}
.link:hover:after { height:7px; background-color: #0096b9;

}

Veja o Resultado!

Baixar Código Veja Funcionando