CSS Updates - New Properties for Styling Text Decorations & Underlines

CSSWeb DevelopmentFront End Technology

With the introduction of the following text-decoration properties, we can now style text in more ways than before. 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*/
}

Example

The following examples illustrate CSS text-decoration property.

 Live Demo

<!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>

This gives the following output

Example

 Live Demo

<!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>

This gives the following output

raja
Published on 10-Feb-2021 18:23:04
Advertisements