Text Decoration Using CSS

CSS Web Development Front End Technology

The CSS text-decoration property is used to apply decoration to selected element’s text. We can add a line-through, overline, underline, etc. as values. It is a shorthand for text-decoration-line, text-decoration-color and text-decoration-style.

Syntax

The syntax of text-decoration property is as follows −

Selector {
   text-decoration: /*value*/
}

Example

The following examples illustrate CSS text-decoration property −

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(2)::before {
   content: " We will reach the destination ";
   background-color: lightgreen;
   text-decoration: overline blue;
   font-size: 1.2em;
}
</style>
</head>
<body>
<p>I'm not the only traveller</p>
<p>
before night.
</p>
</body>
</html>

Output

This gives the following output −

Example

Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
span {
   background: rgb(204,22,50);
   text-decoration: blue line-through;
   font-style: italic;
   color: white;
}
p {
   text-decoration: underline;
}
</style>
</head>
<body>
<h2>Department Details</h2>
<p>
The employees of Department Marketing, Operations, Finance,
<span>IT</span>
are requested to email their original documents.<span> Delay in submission will lead to delayed verification.</span>
</p>
</body>
</html>