CSS3’s Text Decoration Property

Published November 26, 2016 by CSS Newbies.

Knowing how to add an underline your text and knowing how to remove an underline from your text are equally as important skills to have in CSS (the default style rules in every browser give anchor tags an underline, and knowing how to remove this will go a long way in making your pages look more styled). The values that the text-decoration property takes are: none, underline, overline, and line-through…and they’re all pretty self-explanatory. To see some examples, look below:

p{
   text-decoration: underline;
}

Screen Shot 2016-11-26 at 2.28.53 PM

Probably the most commonly used text-decoration property value, “underline” adds a line beneath the text.

p{
   text-decoration: overline;
}

Screen Shot 2016-11-26 at 2.29.02 PM

While you don’t see “overline” very often, it adds a line above the text.

p{
   text-decoration: line-through;
}

Screen Shot 2016-11-26 at 2.29.13 PM

Line-through is a really useful property value that adds a strike through your text.

p{
   text-decoration: none;
}

Screen Shot 2016-11-26 at 2.29.25 PM

Text-decoration: none is the default for most elements and can be used to get rid of any unwanted over, under, or through lines applied to your text.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>