CSS Text Decoration

The text-decoration changes a section of text to underline, overline, or line-through.

    
       p-under {
		  text-decoration: underline;
	   }
       p-over {
		  text-decoration: overline;
	   }
       p-through {
		  text-decoration: line-through;
	   }
	   /* You can aslo do this */
       p-red {
		  text-decoration: underline red;
	   }
       p-wavy {
		  text-decoration: underline wavy red;
	   }
    

Text Decoration Examples

Style Display
<span class="p-under">coding tools</span> coding tools
<span class="p-through">coding tools</span> coding tools
<span class="p-over">coding tools</span> coding tools
<span class="p-wavy">coding tools</span> coding tools
<span class="p-red">coding tools</span> coding tools

The main text-decoration you will use

  • none: Produces no text decoration
  • underline: Each line of text is underlined
  • line-through: Each line of text has a line through the middle
  • overline: Each line of text has a line above it
  • inherit: Inherits the decoration of the parentit

Tips

  • You may combine different kinds of text decorative in one statement.
  • The default value is no text decoration.

Browser Compatibility

The CSS text-decoration property has basic support with the following browsers:
  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile
Text decoration can be styled by overline, underline, line-through property values and also different line styles with any color.