The problem with text-decoration: underline is that the border always has the same color as the text and that you can't define the space between text and the underline itself. To get around these problems you can simply use border-bottom. The problem you are often faced with is how to get the border further away or nearer to it's text without affecting the line-height of the whole paragraph. The simple solution is to apply inline-block and then adjusting the line-height.
<p>Lorem ipsum dolor <a href="#">sit amet</a>, consectetuer adipiscing elit.</p>p {
color: #000;
font-size: 16px;
line-height: 20px;
}
a {
display: inline-block;
color: #000;
line-height: 18px;
text-decoration: none;
border-bottom: 1px solid #bbb;
}Once again I made a small Pen on CodePen so you can play around with it.
