CSS Text Decoration Color Property to Modify Underline Color

Ad Banner Image

CSS Text Decoration Color Property

Text Decoration Color property is used to set the color of the underline of HTML text.

First, you have to write the text-decoration-line property than you have to write text-decoration-color property to apply the color Property properly.

Example 1 – Use of the CSS Property to set Underline Color

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-color: blue;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum aute iru renisi ut exea commodo con erit.</p> 
  </body>
</html>

In the above code, we apply the text-decoration-color and text-decoration-line properties to an HTML paragraph element to show line to the paragraph element with the changed color.

CSS Text Decoration Color Property Example with HTML p Tag
Fig.1 – Text Decoration Color Property Example with HTML p Tag

Caution: Here you can not set different colors to underline and overline. Only one color is set to the lines.

Example 2 – Another example of Underline Color set with this Property

<!DOCTYPE html>
<html>
  <head>
    <style>
		.a
		{
		 text-decoration-line: underline;
		 text-decoration-color: blue;	 
		}
    </style>
  </head>
  <body>
    <p>This is a default paragraph element.</p>
    <p class="a">Lorem ipsum aute iru renisi ut exea commodo con erit.</p> 
  </body>
</html>

In the above code, we apply the text-decoration-color and text-decoration-line properties to an HTML paragraph element to show line to the paragraph element with the changed color.

In the “class a” we apply different colors to underline and overline, but text-decoration-color will not apply because you can not set different color to underline and overline.

CSS Property Example with HTML p Tag to Change the Underline Color
Fig.2 – Property Example with HTML Tag to Change the Underline Color of Text
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