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-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-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-thickness

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):

Now let’s add a small underline offset using text-underline-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 = Designer. Developer. Producer. Writer. Editor. Etc.