Variations of the CSS Text-Decoration Property

The CSS text-decoration property is capable of much more than the standard underlines and strike-throughs. Text-decoration has properties that can create dashed, dotted, or wavy lines positioned below or above text.  Use the standard text-decoration property to define the decoration as an underline, overline, or line-through. The text-decoration-style property defines the style of the decoration. It accepts the parameters solid (default), double, dotted, wavy, dashed, wavy, initial, and inherit. There’s also a text-decoration-color property that allows the decoration lines to be any color.

Here’s an example of how to use text-decoration to create a pink dashed line above every p element.

This one creates a red wavy line below every a element.

And this creates dashed green lines above and below text.

As of right now, text-decoration-style and text-decoration-color are only supported on Firefox, but as other browsers catch up they we’ll definitely be seeing more of these awesome CSS properties.