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.

  1. p{
  2. text-decoration: overline;
  3. text-decoration-style: dashed;
  4. text-decoration-color: pink;
  5. }

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

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More
  1. a{
  2. text-decoration: underline;
  3. text-decoration-style: wavy;
  4. text-decoration-color: red;
  5. }

And this creates dashed green lines above and below text.

  1. p{
  2. text-decoration: underline overline;
  3. text-decoration-style: dashed;
  4. text-decoration-color: green;
  5. }

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.

Share and Enjoy !

0Shares
0 0