Font or Link Underline Style with CSS Text Decoration Line Property

Ad Banner Image

Text Decoration Line Property

Text Decoration Line is a property to decorate text of an HTML Element by making an underline.

You can apply underline, overline, and through-line with the use of the text decoration line property. You also apply more value at same to an HTML Element.

Example 1 – Use of this property for removing underline style from link HTML tag

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
			text-decoration-line: underline;
		}
    </style>
  </head>
  <body>
    <p>This is a default font-style of paragraph element.</p>
    <p class="a">Lorem ipsum por inci didunt ut la bore et dol illum dol.</p> 
  </body>
</html>

In the above code we apply the text-decoration-line property to an HTML paragraph element to show underline.

Text Decoration Line Property Example
Fig.1 – Text Decoration Line Property Example

Note: text-decoration-line property does not support by Edge/Internet Explorer.

CSS Link Decoration with overline setting

Example 2 – Text Decoration Line with value overline

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
			text-decoration-line: overline;
		}
    </style>
  </head>
  <body>
    <p>This is a default font-style of paragraph element.</p>
    <p class="a">Lorem ipsum por inci didunt ut la bore et dol illum dol.</p> 
  </body>
</html>

In the above code we apply the text-decoration-line(overline) property to an HTML paragraph element to show line at the upper side of the paragraph element.

CSS Font Style Underline Example for a HTML Tag
Fig.2 – CSS Font Style Underline Example for a HTML Tag.

Caution: text-decoration-line property is mandatory to specify the text-decoration to an HTML Element.

CSS Font Style Underline with Overline and Line Through

You also apply more value at same to an HTML Element. And the syntax is shown bellow.

Example 3 – Another example with multiple values assignment at the same time

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: overline underline line-through;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum aute iru renisi ut ali dol quip ex ea commodo con erit.</p> 
  </body>
</html>

In the above code we apply the text-decoration-line property to an HTML paragraph element to show line to the paragraph element.

CSS Link Decoration with Multiple Value Assignment
Fig.3 – CSS Link Decoration with Multiple Value Assignment
Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress