The text-decoration property is used to “decorate” the content of the text. It is essentially decorating the text with different kinds of lines. It is a shorthand property for text-decoration-line(required), text-decoration-color, and text-decoration-style. Text decorations are drawn across child text elements that means if the parent element specifies a text-decoration then its child element can not remove the decoration specified the parent element.
Syntax:
text-decoration: text-decoration-line text-decoration-style text-decoration-color|initial|inherit;
Property values: All the properties are described well with the example below.
text-decoration-line: It is used to sets various kinds of text-decoration (e.g. underline, overline, etc).
Syntax:
text-decoration: text-decoration-line;
Example: This example illustrates the use of the text-decoration-line Property whose values can be set as underline, line-through, overline.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline;
}
#example2 {
text-decoration: line-through;
}
#example3 {
text-decoration: overline;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: text-decoration-line;</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
|
Output:
text-decoration-style: It is used to set the text-decoration of an element(e.g. dotted, wavy, etc).
Syntax:
text-decoration: text-decoration-line text-decoration-style;
Example: This example illustrates the use of the text-decoration-style property.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline dotted;
}
#example2 {
text-decoration: underline wavy;
}
#example3 {
text-decoration: underline dashed;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
text-decoration:
text-decoration-line text-decoration-style;
</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
|
Output:
text-decoration-color: It is used to specify the color of decorations(overlines, underlines, and line-throughs) over the text.
Syntax:
text-decoration: text-decoration-line text-decoration-color;
Example: This example illustrates the use of the text-decoration-color property.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
ul li {
margin-top: 15px;
}
#example1 {
text-decoration: underline wavy green;
}
#example2 {
text-decoration: line-through red;
}
#example3 {
text-decoration: overline blue;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
text-decoration:
text-decoration-line text-decoration-color;
</h2>
<ul>
<li id="example1">Welcome geeks!</li>
<li id="example2">Welcome geeks!</li>
<li id="example3">Welcome geeks!</li>
</ul>
</body>
</html>
|
Output:
initial: It is used to set an element’s CSS property to its default value.
Syntax:
text-decoration: initial;
Example: This example illustrates the use of the text-decoration property whose value is set to initial.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
#example1 {
text-decoration: initial;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: initial;</h2> <a href="#">
This is a link without text-decoration.
</a>
<br>
<br> <a id="example1" href="#">
This is a link with text-decoration set to initial.
</a>
</body>
</html>
|
Output:
inherit: It is used to inherit a property to an element from its parent element property value.
Syntax:
text-decoration: inherit;
Example: This example illustrates the use of the text-decoration property whose value is set to inherit.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
#example1 {
text-decoration: underline wavy green;
}
#example1child {
text-decoration: inherit;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2> text-decoration: inherit;</h2>
<p id="example1"> I am parent and <span id="example1child">
this my is child.</span> </p>
</body>
</html>
|
Output:
Supported browsers: The browsers supported by text-decoration Property are listed below:
- Google Chrome 1.0
- Internet Explorer 3.0
- Microsoft Edge 12.0
- Firefox 1.0
- Opera 3.5
- Safari 1.0
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
19 Oct, 2021
Like Article
Save Article