CSS text-decoration – underline, overline and strikeout text

CSS property text-decoration describes decorations that are added to the text of an element using the element’s color. Few points to note about text-decoration

  1. Underlines, overlines, and line-throughs are applied only to text (including white space, letter spacing, and word spacing).
  2. margins, borders, and padding are skipped
  3. Value blink is not well supported (does not work in Chrome)

CSS property text-decoration

CSS version: CSS 2.1
Value: none | [ underline || overline || line-through || blink ] | inherit
Initial: none
Applies to: all elements
Inherited: no

text-decoration values

noneNo decoration
underlineEach line of text is underlined.
overlineEach line of text has a line above it.
line-throughEach line of text has a line through the middle.
blinkText blinks (alternates between visible and invisible). Not well supported. Does not work in Chrome.
inheritinherit value from parent

Example – text-decoration

span {margin: 5px;}
.underline {text-decoration: underline;}
.overline {text-decoration: overline;}
.line-through {text-decoration: line-through;}

<span class="underline">Underline example</span>
<span class="overline">Overline example</span>
<span class="line-through">Line through example</span>



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments