Decorating Text with text-decoration



CSS Today, we take a look at the CSS property text-decoration. text-decoration property adds effects to text with several possible values.


They are:
  • none - No decoration on text.
  • underline - The text is underlined.
  • overline - The text has a line over it.
  • line-through - The text has been run over by a line.
  • blink - The text blinks on and off. This only works with some user agents and does not work on all browsers, ie: Chrome. However, a possible work around could be using JavaScript.


Here is a quick example of the text-decoration property being used:


<div style="text-decoration: none">I have no value added.</div>

<div style="text-decoration: underline">
I am the underline line.
</div>

<div style="text-decoration: overline">
I am the overline line.
</div>

<div style="text-decoration: line-through">
I am the line-through line.
</div>

<div style="text-decoration: blink">
I am the blink line.
</div>