Curly underline / Stoyan's phpied.com

Ever wanted to use un underline on a web page that looks like a spelling mistake in Word? You know, the curly red underline. It's actually very easy.

Here's an example.

All you need is:

A small piece of the wavy line, like this (it's stretched here for the demo purpose)
A style that uses the image as background
Align the background at the bottom and repeat only on the x-axis

The style definition would look like:

.curly-underline {
    background: url(underline.gif) bottom repeat-x;
}

And that's it!

I saw this working in TinyMCE, the WYSIWYG editor used by WordPress, for displaying spelling mistakes. Really cool!

Note: If you're a frequent visitor to my site and the example doesn't work for you, chances are you're using a cached version of the CSS file.