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: Facebook, Twitter, Google+

Sorry, comments disabled and hidden due to excessive spam. Working on restoring the existing comments...

Meanwhile, hit me up on twitter @stoyanstefanov