Animação de Borda Css

Animação de Borda Css

Neste artigo vamos criar uma borda animada com Pseudo-elemento ::AFTER no CSS3.

A animação de borda CSS3  vai aparecer quando o usuário passar o mouse sobre o link.

Vamos usar o CSS ::after pseudo-elemento que é o último filho do elemento selecionado. Muitas vezes é usado para adicionar e melhorar o conteúdo de um elemento como a propriedade content.

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

.link::after { content: “”; }

Vamos Adicionar o Html

 Nessa sessão, a estrutura básica do código é projetada usando o <href> no HTML. 

Usaremos a tag <href> com a class=”link” no html para criarmos a estrutura link.

      <a href="#" class="link">Leia mais</a>
      <a href="#" class="link left">Leia mais</a>
      <a href="#" class="link center">Leia mais</a>
      <a href="#" class="link right">Leia mais</a>

Vamos Adicionar o Css: 

Usaremos a propriedade css3 after para criar o efeito de animação de borda quando passar o mouse no link. 

.link {

  position: relative;
  font-family: 'open_sansregular';
  font-size: 0.9em;
  line-height: 25px;
  letter-spacing: 0.5px;
  color: #4c4c4c;
  text-transform: uppercase;
  text-decoration: none;
  margin: 0 30px;

}

.link:after {

  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 3px;
  background-color: #FF6000;
  transition: 0.3s width linear;

}

.link.left:after, .link.center:after, .link.right:after {

  width: 22px;

}

.link.center:after {

  left: 50%;
  transform: translateX(-50%);

}

.link.right:after {

  left: auto;
  right: 0;

}

.link:hover:after {

  width: 100%;

}

Código Completo: 

E por fim a combinação das duas seções de código acima. 

Veja o Resultado da Animação de Borda Css!

Baixar Código Veja Funcionando