Text Decoration Using CSS
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>Output
This gives the following output −
Published on 08-Jan-2020 17:45:54
