Decorating Text with text-decoration

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>