Customization of Underlines using text-decoration

The CSS Text Decoration Module Level 3 module provides us with several new ways to decorate and adorn text on web pages, and browser support for this module is quite extensive, much to our delight.

New CSS properties such as text-decoration-thickness and text-decoration-color can assist in decorating text and underlines in ways that were not possible before.

For example, a common need we encountered in the past was the option to change the color of the underline to a specific color different from the text color itself (the default behavior). Another example is the ability to adjust the thickness of the underline according to a specific design.

As developers, until recently, we used the border-bottom property to display an underline in a color different from the text color, but not anymore…

The text-decoration Property

Originally, the text-decoration property was only relevant for choosing between the values none, underline, overline, and line-through.

However, with the new recommendations, we can use this property in a shorthand manner and combine it with the values of text-decoration-color, text-decoration-style, and text-decoration-line. For example, here is a double underline in a hot pink color:

Here’s the CSS line we have used:

text-decoration: #ff00d3 double underline;

It seems that the same shorthand does not work properly in the Safari browser, so we simply used the non-shorthand form of the properties.

The first value in the line above is text-decoration-color, the second is text-decoration-style, and the third is text-decoration-line. There are additional properties as well; the complete set of properties related to text decoration that were presented (or will be presented in the future) are:

• text-decoration-thickness
• text-decoration-color
• text-decoration-line
• text-decoration-style
• text-decoration-skip
• text-decoration-skip-ink
• text-decoration
• text-underline-offset
• text-underline-position

5 Examples of Decoration and Underline Properties

Let’s look at examples of the mentioned properties and what can be done with them. This is, of course, assuming you are using a browser that supports these properties (most modern browsers):

A. text-decoration-thickness

In the first example, we change the text-decoration-thickness property that controls the thickness of the underline:

B. text-decoration-color

In this example, we change the color of the underline using the text-decoration-color property:

C. text-underline-offset

In example number three, we change the position of the underline using the text-underline-offset property. You can set its offset from the original position and change it to any desired location:

D. text-decoration-skip-ink

The keen-eyed among you noticed that the underline crosses the descender of the letters ‘C’, ‘l’, ‘U’ and ‘d’ in the previous examples.

The underline actually crosses that descender by default, but with the text-decoration-skip-ink property, we can change this default behavior. Using the value none, for example, will prevent the crossing on the descender:

For general knowledge, that small extra piece of line in the letter is called a Decender…

E. Combination of these Four Properties Together + Hover

So, as you may assume, and as can be seen in the following example, we can combine all four mentioned properties to achieve interesting results. Here, for example, is a demonstration that combines these properties (along with Hover):

By the way, here’s a great video by Jenn Simmons explaining in detail the properties mentioned in this post:

That’s it.