I want to display misspelled words within text in HTML that are detected by a spell checker. I simply put the misspelled words in a <span> element, and made the color red, and the text-decoration underline. However, the text also has hyperlinks, which are in the default design (color is blue/purple, and text-decoration is underline), and they look similar. How can I make the misspelled words be more distinct from links?

1 Answer 1


The 2 most popular ways of indicating misspelled text are to underline it with either red dotted line or red wavy line – the practice adopted by word processors and browsers.

The easiest way is to set dotted underline: just apply border-bottom: dotted 1px red property to your <span> element.

The implementation of wavy line is a way trickier: https://stackoverflow.com/questions/6821365/how-to-put-a-waved-line-under-misspelled-words-html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.