Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
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!

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
WP Themes In Depth: Build and sell awesome WordPress themes.
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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
DIY: Monitor File Changes via Cron working perfectly for over a decade.
Mastodon social is a trip. Glad I found it.
As a strict rule, I never use cache plugins on any of my sites. They cause more problems than they solve, imho. Just not worth it.
Currently on a posting spree :)
6 must come before 7.
My top three favorite-to-write coding languages: CSS, PHP, JavaScript.
If you’re not 100% sure that you can trust something, you can’t.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.