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