CSS text-decoration

The CSS text-decoration property is used to decorate the text. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      .del{text-decoration: line-through red;}
   </style>
</head>
<body>
   
   <p>This is a <span class="del">deleted</span> text.</p>
   
</body>
</html>

Output

This is a deleted text.

CSS text-decoration Syntax

The syntax of text-decoration property in CSS, is:

text-decoration: text-decoration-line text-decoration-color text-decoration-style;

From all the three, the text-decoration-line is required. The text-decoration property can also be called/used as shorthand of following three properties:

text-decoration-line - decorate the text using some kind of lines
text-decoration-color - color the text-decoration-line
text-decoration-style - style the text-decoration-line

Note - We can also use initial or inherit keyword to define the text-decoration property.

Note - The initial keyword is used, when we need to use the default value. Whereas the inherit keyword is used, when we need to use the value inherited by the parent element.

CSS text-decoration Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2{padding: 14px 0;}
      .a{text-decoration: underline;}
      .b{text-decoration: overline purple;}
      .c{text-decoration: line-through double red;}
      .d{text-decoration: underline overline solid yellow;}
      .e{text-decoration: underline yellow;}
   </style>
</head>
<body>
   
   <h2 class="a">text-decoration: underline</h2>
   <h2 class="b">text-decoration: overline purple</h2>
   <h2 class="c">text-decoration: line-through double red</h2>
   <h2 class="d">text-decoration: underline overline solid yellow</h2>
   <h2 class="e">text-decoration: underline yellow</h2>
   
</body>
</html>