Table of Contents

They say good things come to those who wait, and this turns out to be very true when it comes to text decoration on the web. The CSS Text Decoration Module Level 3 defines a few great new ways to decorate text on the web, and browsers are finally starting to have good support for them. The times of using <^>border-bottom<^> instead of a proper text underline in order to get a different underline color may finally come to pass.

[warning] Results may vary: support is still limited, so the examples in this post may not display correctly depending on the browser you're using.

text-decoration

text-decoration illustration for: text-decoration

The <^>text-decoration<^> property used to be only about a choice between values of <^>none<^>, <^>underline<^>, <^>overline<^> and <^>line-through<^>, but with the new recommendation is becomes a shorthand for the new <^>text-decoration-color<^>, <^>text-decoration-style<^> and <^>text-decoration-line<^> properties. For example, here's a colored double underline:

				
					
.fancy {

 -webkit-text-decoration: hotpink double underline;

 text-decoration: hotpink double underline;

}

Fancy Underline

text-decoration-color

Works just as you would imagine. Finally a way to change the text decoration color!

text-decoration-style

<^>text-decoration-style<^> is used to define the type of text decoration, and the new recommendation brings two new values: <^>double<^> and <^>wavy<^>:

				
					
.wavy {

 text-decoration: underline;

 -webkit-text-decoration-color: salmon;

 text-decoration-color: salmon;

 -webkit-text-decoration-style: wavy;

 text-decoration-style: wavy;

}

Wavy Decoration

text-decoration-line

<^>text-decoration-line<^> accepts values of <^>underline<^>, <^>overline<^>, <^>line-through<^> and <^>blink<^> (blink is deprecated however):

				
					
.strike {

 -webkit-text-decoration-color: red;

 text-decoration-color: red;

 -webkit-text-decoration-line: line-through;

 text-decoration-line: line-through;

}

Strike This

text-decoration-skip

With <^>text-decoration-skip<^> we can avoid having the decoration step over parts of the element its applied to. The possible values are <^>objects<^>, <^>spaces<^>, <^>ink<^>, <^>edges<^> and <^>box-decoration<^>.

  • <^>ink<^>: Finally, a way to prevent text decoration from overlapping glyph descenders:
				
					
.ink {

 -webkit-text-decoration: darkturquoise solid underline;

 text-decoration: darkturquoise solid underline;

 -webkit-text-decoration-skip: ink;

 text-decoration-skip: ink;

}

Hippopotamus

—

  • <^>objects<^>: The text decoration skips elements that have a display of <^>inline-block<^>. It's also the initial value:
				
					
&lt;p class="super"&gt;

 Getting &lt;span style="display: inline-block;"&gt;Very&lt;/span&gt; Fancy

&lt;/p&gt;

				
			
				
					
.super {

 -webkit-text-decoration: peru solid overline;

 text-decoration: peru solid overline;

 -webkit-text-decoration-skip: objects;

 text-decoration-skip: objects;

}

Getting Very Fancy

—

The remaining values are not yet well supported by browsers:

  • <^>spaces<^>: The decoration skips spaces and punctuation.
  • <^>edges<^>: Creates a gap when two elements with text decoration are next to each other.
  • <^>box-decoration<^>: The decoration skips any inherited margin, padding or border.

text-underline-position

With <^>text-underline-position<^> we have yet another way to control the positioning of text decoration in relation to the glyphs. The possible values are <^>auto<^>, <^>under<^>, <^>left<^> and <^>right<^>.

With <^>auto<^>, the initial value, browsers will usually place the decoration close to the text baseline:

				
					
.auto {

 -webkit-text-decoration: slateblue solid underline;

 text-decoration: slateblue solid underline;

 -webkit-text-underline-position: &lt;^&gt;auto&lt;^&gt;;

 text-underline-position: &lt;^&gt;auto&lt;^&gt;;

}

Hippopotamus

…and notice now how, with <^>under<^>, the decoration is placed after the text descenders:

				
					
.under {

 -webkit-text-decoration: slateblue solid underline;

 text-decoration: slateblue solid underline;

 -webkit-text-underline-position: &lt;^&gt;under&lt;^&gt;;

 text-underline-position: &lt;^&gt;under&lt;^&gt;;

}

Hippopotamus

The <^>left<^> and <^>right<^> values for text-underline-position are used to control text decoration in vertical writing modes.

Now go on and impress us with some fancy text decoration!

[info]

Browser Support: As of 2020, Can I Use text-decoration? shows that 94% of browsers worldwide have at least partial support for the property.