假设我的文字如下：

@H_403_6@

我想要匹配两个字符串：许多人和亚洲人.我希望输出看起来像两个字符串都是独立找到的,也许是为每个匹配的字符串应用不同的彩色下划线,如下所示：

但是,在HTML中我不能重叠跨度,因为如果我试过这个：

@H_403_6@span.first { border-bottom: 1px solid red; }
span.second { border-bottom: 1px solid blue; }

第一个< / span>将关闭span.second.

我的想法是将div放在文本下面,使它们与上面p中的匹配文本对齐,但我敢打赌使用CSS将这些div与匹配字符串的开始和结束位置对齐将是一场噩梦.

有关如何做到这一点的任何想法？