CSS text-decoration-line

The CSS text-decoration-line property is used to decorate the text using some kind of lines. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{text-decoration-line: underline;}
   </style>
</head>
<body>

   <h2>The text-decoration-line Property</h2>
   <p>This is an example of text-decoration-line property in CSS.</p>
   
</body>
</html>

Output

The text-decoration-line Property

This is an example of text-decoration-line property in CSS.

CSS text-decoration-line Syntax

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

text-decoration-line: x;

The value of x should be any of the following:

none - used not to define any line to decorate the text
underline - used to create a line under the text
overline - used to create a line over the text
line-through - used to create a line through the text
initial - used to use the default value
inherit - used to use the value inherited by the parent element

Note - We can also use combination of lines to decorate the same text. For example, underline overline creates a line under and over the text.

Note - The underline is used most of the time, to make the text appears to be more important.

CSS text-decoration-line Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p{padding: 14px 0;}
      .a{text-decoration-line: underline;}
      .b{text-decoration-line: overline;}
      .c{text-decoration-line: line-through;}
      .d{text-decoration-line: underline overline;}
      .e{text-decoration-line: underline line-through;}
      .f{text-decoration-line: overline line-through;}
      .g{text-decoration-line: underline overline line-through;}
   </style>
</head>
<body>

   <p>text-decoration-line: <span class="a">underline</span></p>
   <p>text-decoration-line: <span class="b">overline</span></p>
   <p>text-decoration-line: <span class="c">line-through</span></p>
   <p>text-decoration-line: <span class="d">underline overline</span></p>
   <p>text-decoration-line: <span class="e">underline line-through</span></p>
   <p>text-decoration-line: <span class="f">overline line-through</span></p>
   <p>text-decoration-line: <span class="g">underline overline line-through</span></p>
   
</body>
</html>

Output

text-decoration-line: underline

text-decoration-line: overline

text-decoration-line: line-through

text-decoration-line: underline overline

text-decoration-line: underline line-through

text-decoration-line: overline line-through

text-decoration-line: underline overline line-through

CSS Online Test

« Previous Tutorial Next Tutorial »