Control underline position on text-decoration: underline
CssUnderlineCss Problem Overview
Is there a way to control the position of the underline in text-decoration: underline?
<a href="#">Example link</a>
The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?
Css Solutions
Solution 1 - Css
2020
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.
Solution 2 - Css
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/
Solution 3 - Css
There is the proposed text-underline-position property in CSS 3, but it seems that it has not been implemented in any browser yet.
So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.
Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom – which does not add to the total height – instead (though it is not as widely supported as border-bottom).
Solution 4 - Css
2021
There is the text-underline-offset property in CSS Text Decoration Module Level 4 which allows you to move the decoration by a specified distance away from its original position.
As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.
text-underline-offset property accepts these values:
auto- default, makes the browser choose the appropriate offset.from-font- if the used font specifies a preferred offset, use that, otherwise it falls back toauto.<length>- specify distance in the "usual" CSS length units. Useemto allow scaling proportionally with thefont-size.
Example below:
p {
text-decoration: underline;
text-decoration-color: red;
margin-bottom: 1.5em;
}
p.test {
position: relative;
}
p.test::after {
position: absolute;
content: '';
display: block;
height: 1px;
width: 100%;
background: blue;
bottom: 0;
}
<p style="text-underline-offset: 0.75em;" class="test">
If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>
<p style="text-underline-offset: auto">
And now let’s try it with `text-underline-offset` set to `auto`.
</p>
<p style="text-underline-offset: from-font">
With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>
Solution 5 - Css
2021
you can use text-underline-position: under;
<body>
<h1>
<a href="#"
style="text-decoration: underline; text-underline-position: under;" >
My link</a>
</h1>
</body>
for more details check https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
Solution 6 - Css
Use a border-bottom instead of the underline
a{
border-bottom: 1px solid #000;
padding-bottom: 2px;
}
Change padding-bottom to adjust the space
Solution 7 - Css
Using border-bottom-width and border-bottom-style will make the border the same color of the text by default:
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;
Solution 8 - Css
There is one property text-underline-position: under. But only supported in Chrome and IE 10+.
More info: https://css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position
Solution 9 - Css
I would use border instead. Easier to control that.