How to Use Safe Text Decoration in CSS3 - dummies

How to Use Safe Text Decoration in CSS3

By John Paul Mueller

The only safe text effect in CSS3 is the use of the text-decoration property to define the addition of a characteristic to the font. This property works everywhere, so you don’t need to worry whether someone viewing your page on a television or using a smartphone will get your message. The following list describes the sorts of text decoration you can perform.

  • none: Removes any text decoration that might already be in place.

  • underline: Places a line under the text.

  • overline: Places a line over the top of the text.

  • line-through: Places a line through the text (often used to mark deletions).

  • blink: Causes the text to blink. This particular feature is unsafe. People who have certain physical issues, such as photosensitive epilepsy could have a seizure just from viewing your page.

    Mind you, this effect isn’t limited to those who have photosensitive epilepsy; it’s been documented for other people as well. In fact, the only reason this unit documents this particular feature is to help you avoid it. Blinking text isn’t just annoying; it can have significant nasty side effects.

  • inherit: Uses whatever decoration is employed with the parent element.

It isn’t possible to combine text decoration effects. For example, if you try to combine an underline with an overline, you won’t see either effect onscreen because the browser will be confused. In addition, text decoration effects won’t appear in places where there’s no text.