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 −

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         margin: 3%;
         font-size: x-large;
         text-decoration: dotted underline purple 3px;
      }
   </style>
</head>
<body>
   <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>

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 −

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         margin: 3%;
         font-size: x-large;
         text-decoration-line: underline overline;
         text-decoration-style: dotted;
         text-decoration-skip-ink: none;
         text-decoration-thickness: 4px;
      }
   </style>
</head>
<body>
   <p>Super Demo abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>

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 −

<!DOCTYPE html>
<html>
<head>
   <style>
      #one {
         text-decoration-style: double;
         text-decoration-skip-ink: auto;
      }
      p {
         padding: 2%;
         text-decoration-line: underline overline;
         text-decoration-style: wavy;
      }
      p:nth-of-type(even) {
         text-decoration: overline;
      }
      span {
         text-decoration: line-through;
      }
   </style>
</head>
<body>
   <p id="one">Random Demo abcdefghijklmnopqrstuvwxyz</p>
   <p>Random Demo Text</p>
   <p>Random <span>Demo</span> Text</p>
</body>
</html>

Updated on: 31-Oct-2023

98 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements