11

Read between, above, and under the underlines!

While text-decoration certainly isn't the most cutting edge feature, it is a very useful one. It has been around quite a while, but recently got overhauled into the CSS Text Decoration Module Level 3 spec. The new text decoration features give you a lot more control than you had before.

Show me what you got!

Note: This examply only works in Firefox at the moment.

  • Wavy underlines
  • Dashed underlines
  • Underlines with different color
  • Overline can be wavy too
  • Line through with different color
  • Skip underlines on spaces (no support yet..)
Some cool line coloring examples. :)

How does it work?

After yesterday's extremly tricky Audio API, the text-decoration CSS property is a breeze. The CSS property text-decoration-line defines where you want your text line positioned. The value can be either underline, overline or line-through. With the text-decoration-style property you can choose what kind of line you want the text-decoration-line to be. You can use the most basic line style values you already know from CSS borders. The color of the line is controlled with text-decoration-color.

Most unfortunately, the more useful features like text-decoration-skip have not been implemented by any browser yet. This would allow you to specify when you want the line interrupted, ie. you could have the line skip spaces.

Useful?

It's a tiny thing but it gives you a tad more control than the old CSS2.1 version. Previously, you needed all kinds of hacks to creaty nice wavy underlines — now we can replace all that junkyard code with clean-cut text-decoration-* properties in a breeze.

Great, but can I use it today?

Not quite. Firefox supports some of the spec since version 6, but none of the other browsers currently support it. There is a resolved bug for this in Webkit, but we couldn't get it to work in Chrome or in Chrome Canary.

Show me the source!

Feel free to look around the differente source files we used for this example.