• HTML
• CSS

HTML

<a href="#">Decoración de un texto elegante</a>

CSS

/*
    Es muy importante indicar la posición relativa del selector 'a',
    para que la posción absoluta  de otro elemento se posicione correctamente
    dentro de ella.
*/

/*
    Algunos elementos tienen valores por defecto, en este caso no es 
    la excepción, por eso ponemos 'text-decoration' con valor 'none'

*/

a{
    font-family:arial;
    font-size:32px;
    color:#000;
    position:relative;
    padding:0;
    text-decoration:none;
}

/*
    Para este caso la propiedad 'content' será vacia y 
    la 'transition'  que sea  de 3 segundos  de modificadores 'all ease'
*/
a:after{
    position:absolute;
    content:"";
    left:0;
    bottom:-6px;
    width:0;
    height:4px;
    border-radius:5px;
    background-color:#ffc600;
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
}

/*  
    Utilizamos pseudo-elemento 'hover' y 'focus' para realizar el efecto,
    e indicamos el ancho con valor de 100%, porque inicialmente está en cero ' width:0'
*/
a:hover:after,a:focus:after{
    width:100%;
}