text-decoration-line Archives

The CSS text-decoration-line property settles the kind of text decoration to use (like underline, overline, line-through).

Demo:

Syntax:

text-decoration-line: none|underline|overline|line-through;

none (default) – defines no line for the text-decoration.

underline – defines that a line will be displayed under the text.

overline – defines that a line will be displayed over the text.

line-through – defines that a line will be displayed through the text.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.ex1 {
   text-decoration-line: overline; 
}

.ex2 {
   text-decoration-line: underline; 
}

.ex3 {
   text-decoration-line: line-through; 
}

</style>
</head>
<body>

<div class="ex1">This is some text with a line on top.</div>
<br>

<div class="ex2">This is some text with an underline.</div>
<br>

<div class="ex3">This is some text with a line-through.</div>

</body>
</html>

Output:

This is some text with a line on top.

This is some text with an underline.

This is some text with a line-through.

Example2:

You can also combine more than one value, like underline and overline to display lines both under and over the text.

<!DOCTYPE html>
<html>
<head>
<style>

.example-2 {
   text-decoration-line: overline underline; 
}
</style>
</head>
<body>

<div class="example-2">This is some text with an overline and an underline.</div>

</body>
</html>

Output:

This is some text with an overline and an underline.

Enjoy coding!