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-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-bottomproperty to display an underline in a color different from the text color, but not anymore…
The text-decoration Property
text-decoration property was only relevant for choosing between the values
However, with the new recommendations, we can use this property in a shorthand manner and combine it with the values of
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:
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):
In the first example, we change the
text-decoration-thickness property that controls the thickness of the underline:
In this example, we change the color of the underline using the
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:
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: