• HTML
• CSS

HTML

<ul type="circle">
    <li> <a href="#">Decoración de un texto</a> </li>
    <li> <a href="#">Decoración</a> </li>
    <li> <a href="#">Deco</a> </li>
    <li> <a href="#">D e c o r a c i ó n</a> </li>
</ul>

CSS

/* lista */
ul li{
    padding:10px;
}

/* decoración */
a{
    font-family:arial;
    font-size:16px;
    color:#000;
    position:relative;
    padding:0;
    text-decoration:none;
}
a:after{
    position:absolute;
    content:"";
    left:0;
    bottom:-6px;
    width:0;
    height:3px;
    background-color:#8e44ad;
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
}
a:hover:after,a:focus:after{
    width:100%;
}