Quick Reach
The text-decoration property of CSS
The text-decoration property is used to set the text as underline, overline, line-through or normal in the web pages.
>>A link without underline example
The underline in the links can also be removed by using the text-decoration CSS property. Besides, the line-through value can be used to present out-dated information, for example.
Syntax of text-decoration property
Following is the general syntax to use the text-decoration property:
text-decoration: value;
Where the value can be any of the following:
- none: Normal text.
- underline: a line under the text.
- overline: A line above the text.
- line-through: A line across the given text.
CSS underline example
The following is an underline example. In this example, we will use the text-decoration property to add an underline in the div text. Along with underline text, it also shows using the overline value in the h1 heading.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<html>
<head>
<style>
/*Using CSS text*/
h1
{
background-color: #F0F0F0;
color: rgb(000,125,255);
text-decoration: overline;
}
div
{
background-color: #F0F0F0;
color: rgb(000,125,255);
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Heading with overline</h1>
<div>Text decoration with underline text</div>
</body>
</html>
|
A link without underline example
As mentioned earlier, you may use the text-decoration property to remove underlines in HTML links as well. By default, the links are underlined. By using the CSS, underline can be removed as shown in the example below:
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<style>
/*Using CSS text*/
a
{
background-color: #F0F0F0;
color: rgb(000,125,255);
text-decoration: none;
}
</style>
</head>
<body>
<a href=“https://www.tutorialscollection.com/”>Link Without Underline</a>
</body>
</html>
|
As you can see, by simply using the CSS text-decoration property as none, the underline can be removed in the links.
Example of text-decoration with line-through
This example uses the line-through value in the text-decoration property to add line through the text in a div tag.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
<html>
<head>
<style>
/*Using CSS text*/
div
{
background-color: #F0F0F0;
color: rgb(000,125,255);
text-decoration: line-through;
}
</style>
</head>
<body>
<div>Text decoration with line-through</div>
</body>
</html>
|
Read more: CSS vertical-align
Leave A Comment?