Control underline position on text-decoration: underline

2020

Use text-underline-offset!

2012

The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Here's a demo. If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.

You can use pseudo before and after like this. It works well and is completely customizable.

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>

Here's a more advanced demo with a screenshot attached I made that animates the underline on hovering, changes colors, etc...

http://codepen.io/bootstrapped/details/yJqbPa/