如何在拼写错误的单词HTML下放置挥手

Question

我有一个网页HTML和JS.

我需要在拼写错误的单词下添加红色波浪线.我得到了我的算法来检测那些单词,但我只需要知道如何在这些单词下放一个挥手.

Answer 1

如果你不想使用gif作为卷曲下划线,你可以通过纯css来实现:

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

(或者在JSFiddle中运行)

Answer 2

实际上你只是使用CSS没有标准的卷曲下划线,但请查看本教程,了解如何自己创建一个:

摘自此处:http://www.phpied.com/curly-underline/

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

Answer 3

红色,波浪下划线非常简单,如CSS 3的文本装饰模块中所述.

* { text-decoration: underline wavy red; }

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

浏览器支持正在迎头赶上.您可以为Microsoft Edge 投票,我鼓励您这样做.

规范并不新鲜; 自2011年以来,Firefox一直支持它,自2016年以来一直支持Chrome.希望我们可以依靠Safari和Edge尽快支持它.

2017年更新:Chrome已于2016年关闭此问题,我已经使用Chrome 58对其进行了测试,该版本有效,并且是波浪线的一大推动力.