Text decoration in css
In this article we are going to learn about text decoration property, none, underline, overline and line-through in css, how to format a text with underline, overline and line through.
We learnt about css in general, lists style in css, multiple css, fixed layout in css, liquid layout in css, links style in css, box shadow in css, text align in css, table style in css, text shadow in css, letter spacing in css, word spacing in css and text transform in css so, we will be focusing on text decoration.
Text decoration
Text decoration is a Cascading Style Sheet property used to format a text with the values of underline, overline and line through, also hiding the decoration already applied by using none value.
None
None is a value of text decoration property used to hide the decoration that is already applied to the text.
Let us create a link with none value of text decoration property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-decoration-example {
text-decoration: none;
}
<style/>
</head>
<body>
<a href="" class="text-decoration-example">This is a link with none value of text-decoration applied.</a>
</body>
</html>
So, we should have the following results.
This is a link with none value of text-decoration applied.Underline
Underline is a value of text decoration property used to draw or add a line below or underneath the text.
Let us create another div element with underline value of text decoration property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-decoration-example {
text-decoration: underline;
}
<style/>
</head>
<body>
<div class="text-decoration-example">This is a div element with underline value of text-decoration applied.</div>
</body>
</html>
So, we should have the following results.
Overline
Overline is a value of text decoration property used to add or draw a line on the top of the text
Let us create a div element with overline value of text decoration property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-decoration-example {
text-decoration: overline;
}
<style/>
</head>
<body>
<div class="text-decoration-example">This is a div element with overline value of text-decoration applied.</div>
</body>
</html>
So, we should have the following results.
Line-through
Line-through is a value of text decoration property used to add or draw a line through a text
Let us create a div element with line-through value of text decoration property applied, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.text-decoration-example {
text-decoration: line-through;
}
<style/>
</head>
<body>
<div class="text-decoration-example">This is a div element with line-through value of text-decoration applied.</div>
</body>
</html>
So, we should have the following results.