Curly underline

April 4th, 2006. Tagged: CSS

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 Curly underline (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.

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov