Tego nie ogarniesz za pomocą text decoration, ale na szczęście jest multum innych sposobów:
Najprościej będzie to zrobić za pomocą border-bottom - możesz dowolnie ustalić wówczas szerokość, czy kolor lini.
a
{
display: inline-block;
padding: 2px 10px;
border-bottom: 2px solid transparent;
}
a:hover
{
border-color: #ccc;
}
Możesz też, tak jak wspomniał @Shaoi wykorzystać do tego pseudoklasę :after
a
{
display: inline-block;
position: relative;
}
a:after
{
content: " ";
display: block;
width: 100%;
height: 3px;
background: transparent;
position: absolute;
bottom: -2px;
left: 0;
}
a:hover:after
{
background: #ccc;
}