How to put a waved line under misspelled words HTML

Question

I have a webpage HTML & JS.

I need to add a red waved-line under misspelled words. I got my algorithm to detect those words but I just need to know how put a wa

Answer 1

Actually you don't have a standard curly underline just by using CSS, but check this tutorial on how to create one yourself:

Taken from here: http://www.phpied.com/curly-underline/

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

Answer 2

If you don't wanna use a gif for the curly underline, you can do it by pure css:

<span style="border-bottom: 1px dotted #ff0000;padding:1px">
    <span style="border-bottom: 1px dotted #ff0000;">
        foobar
    </span>
</span>

(Or run in JSFiddle)

Answer 3

Red, wavy underline is very simple, as specified in CSS 3's Text Decoration Module.

* { text-decoration: underline wavy red; }

Run me in Chrome or Firefox to see me ride over a red wave!

Browser support is catching up. You may vote for it for Microsoft Edge, which I would encourage you to do.

The spec is not new; Firefox has been supporting it since 2011, and Chrome since 2016. Hopefully, we can count on Safari and Edge to support it soon too.

Update 2017: Chrome has closed the issue in 2016, and I've tested it with Chrome 58, which works, and is a big boost of the wavy lines.