Use-Cases of this video
- Know about the new CSS properties related to text decoration and underlines.
- Know about "text-decoration-thickness", "text-decoration-color" and other related text decoration CSS properties.
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.