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.
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
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
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.
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.