Use-Cases of this video

The new CSS properties such as "text-decoration-thickness", "text-decoration-color" etc can help in creating attractive text decorations and underlines, which were not possible before.

New CSS properties have been introduced for styling underlines in webpages. These can help in designing text decorations that were not possible before.

For example, a very common need has been to change the underline color of a hyperlink to a specific color (different than its text color, which is the default). We may also like to set thickness of the underline as per our need. To do these things, we have been using the border properties of the hyperlink.

But now things are set to be changed! There is the text-decoration-color property to change color of the underline. Then there is the text-decoration-thickness property that can change thickness of the underline.

The complete set of new CSS properties related to text decoration that are introduced (or going to be) 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

The below video from Mozilla gives a nice introduction to some of these these CSS properties. These are explained through demos, so effects of these properties can be seen in action.