CSS Updates - New Properties for Styling Text Decorations & Underlines

With the introduction of the following text-decoration properties, we can now style text in more ways than before. The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, text-underline-offset and text-underline-position need to be specified explicitly.

Syntax

The syntax of CSS text-decoration is as follows ?

Selector {
   text-decoration: /*value*/
}

The text-decoration Shorthand Property

The text-decoration is the shorthand for text-decoration-thickness, text-decoration-color, text-decoration-line and text-decoration-style. text-decoration-skip, text-decoration-skip-ink, text-decoration, etc.

Example

Let us see an example to use the shorthand property to decorate text ?

   


   
Super Demo abcdefghijklmnopqrstuvwxyz

Text Decoration With Text Overline and Underline

We can set an underline and overline on a text using the following properties ?

text-decoration-line: underline overline;

Above, we have set the values underline and overline.

Example

Let us see the example ?

   


   
Super Demo abcdefghijklmnopqrstuvwxyz

Text Decoration With Skip ink to Control the Behaviour

The text-decoration-skip-ink property is used to control the behaviour of underline and overline. The values can be the following ?

• auto ? It skip underlines/overlines when passing through a character. The default.

• none ? Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

Example

The following example illustrate CSS text-decoration property ?

   


   
Random Demo abcdefghijklmnopqrstuvwxyz
   
Random Demo Text
   
Random Demo Text