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?