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:

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

text-decoration: underline

text-decoration: overline purple

text-decoration: line-through double red

text-decoration: underline overline solid yellow

text-decoration: underline yellow

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!