Titulos animados para nuestras entradas

Este efecto es un subrayado animado deslizante que funciona al pasar el cursor sobre el titulo.


Como siempre digo antes de modificar algo de nuestra plantilla, tenemos que hacer una copia de seguridad por si algo no nos sale bien.
Puedes verlo paso a paso en este .Vínculo
Ahora nos vamos a 
Tema > Editar HTML y buscamos ]]></b:skin>
justo encima pegamos este codigo.

/* Subrayado título */
h3.post-title {
display: inline-block;
}
h3.post-title:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
h3.post-title:hover:after {
width: 100%;
background: #1198cc;
}

Ajustes:

Cambiar tamaño del subrayado :height: 3px

Color del subrayado: #1198cc