Celebrating 20 years online :)
Web Dev + WordPress + Security

CSS Text Decoration (and Related) Properties

I’ve always made use of CSS text-decoration properties in my theme designs and other dev work. From underlining text to making hyperlinks look great, text-decoration is essential CSS. Until recently I was not aware of a couple of related properties, text-underline-offset and text-underline-position. I am currently planning the next redesign of Perishable Press and thinking about using text-underline-offset to add some style to various link elements. So this post is to bring these related CSS properties together on paper, forever linked in my mind lol.

🤩 text-underline-offset enables designers to add some vertical space between text and underlines. Before CSS 4.0, we had to use border-bottom and line-height like cave people.

text-decoration & friends

The text-decoration property is well-known and widely used. You’ve probably encountered something similar to this:

.example { text-decoration: red dashed underline 3px; }

That’s shorthand for the following set of rules:

.example { 
	text-decoration-color: red;
	text-decoration-line: dashed;
	text-decoration-style: underline;
	text-decoration-thickness: 3px;
}

Apart from a few quirks, browser support for text-decoration is pretty solid. These properties enable elaborate styling of any text content. You can explore the details @ MDN Docs:

text-underline-offset

CSS text-underline-offset property is not included in text-decoration shorthand, but it is related. When underline is specified for the text-decoration-style property, you can use text-underline-offset to offset the distance of the line from its original position. For example:

.example {
	text-decoration: #FFD99B solid underline 30px; 
	text-underline-offset: 10px;
}

As mentioned, text-underline-offset is perfect for adding vertical space between underlines and text. Otherwise browsers tend to display the underline right under the text, as in zero vertical space. I can’t tell you how many times I’ve had to use border and line-height just to space things out a little bit. Now thanks to CSS 4.0, I can do it with text-decoration and text-underline-offset, which just feels better.

Another bonus for text-underline-offset. Adding even a tiny offset between the underline and text can prevent broken/choppy underline display. Here is an example of an underline with no offset (i.e., default display):

Underline with zero offset

Now let’s add a small underline offset using text-underline-offset:

Underline with small offset

For the offset distance, you can use any length or auto to use the browser default value. Apart from percentage values, browser support for text-underline-offset includes all major browsers except IE (Firefox for Android and Opera Mobile also need help). Learn more about text-underline-offset @ MDN.

text-underline-position

This CSS property is similar to the previous, as it only works when underline is specified for the text-decoration-style property. In that case, text-underline-position does exactly what it says: specifies the position of the underline (relative to the default position).

Possible values include auto, from-front, under, left, right, auto-pos, above, and below. This assortment of values makes it possible for underlines to display correctly when used with various languages, mathematical formulas, and so forth. For example languages that display vertically would use either left or right to display the underline to the left or right of text.

.example {
	text-decoration: red dashed underline 3px;
	text-underline-position: under;
}

Although this property seems very useful, browser support for text-underline-position is not great (but improving). Learn more @ MDN.

Others?

Any other text-decoration related properties that should be included? Let me know!

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
SAC Pro: Unlimited chats.
Thoughts
RIP ICQ
Crazy that we’re almost halfway thru 2024.
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.