Como colocar efeito deslizante no sublinhado da sua frase

Olá amigos Mult-focos, tenho um efeito legal para o seu Blogger.
Vamos mostrar como colocar efeito deslizante no sublinhado da sua frase, vai ficar show veja o DEMO ao vivo.

Leia também: Postagens populares com animação em 3D

DEMO

Gostou? Então vamos ver como adiciona-lo no seu Blogger.

Primeiro faça o backup do seu template, agora vá ao painel do Blogger ->Modelo ->Editar HTML -> use Ctrl=F e procure por ]]></b:skin>

acima dele copie e cole o código abaixo, visualize, se estiver tudo ok salve.

/* Sublinhado deslizante */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}

Agora sempre que for postar e quiser destacar uma frase do texto use estes códigos abaixo, substituído a frase destacada em azul, por sua frase. Gostou? Isto é tudo.

<div class="uslide">Efeito deslizante no sublinhado do seu texto para direita </div>


 <div class="uslide2">Efeito deslizante no sublinhado do seu texto para esquerda</div>