我的应用程序是一个可以让用户注释和划线文本以供参考的在线文档。现在，多个用户可以进行此操作，因此每个下划线需要有不同的颜色。
所以基本要求是我需要在一段文本下面添加多个下划线。此外，下划线的颜色应该不同。
我知道一种困难的方法，就是我可以添加带有线条的 div/span 并将其定位在文本下方，但是在响应式窗口的情况下处理位置可能有些困难。
是否有任何使用文本属性的方法来实现这一点？ 我在Google上搜索了一下，找到了这个链接
http://fsymbols.com/generators/lines/
他们正在使用 fsymbols 来生成下划线。 但是我不知道如何将其添加到我的应用程序中。而且它似乎不能有不同的颜色。
有更简单的方法吗？还是我只能采取困难的方法？
在文本中使用文本进行注释似乎不是正确的方法。我认为应该通过标记来进行注释。要实现多个下划线（我知道可能有两个以上的用户），可以在嵌套的span中使用border-bottoms。这些需要设置为显示为inline-block，以便可以影响它们的高度，因此可以嵌套更多的span而不会覆盖边框。还需要考虑到可能发生的重叠 - 也可以是非层次结构的。
请注意，我从用户列表和其关联颜色的下划线本身中保留了它们。
span.user { border-bottom:1px solid; display:inline-block; padding-bottom:1px; }
span[data-uid='001'] { border-bottom-color:blue; }
span[data-uid='002'] { border-bottom-color:red; }
span[data-uid='003'] { border-bottom-color:orange; }<p>
Lorem ipsum dolor sit <span class="user" data-uid="003">amet, <span class="user" data-uid="001"><span class="user" data-uid="002">consectetuer</span> adipiscing elit</span>. Aenean</span> commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <span class="user" data-uid="001">Donec <span class="user" data-uid="003">quam</span> felis,</span> ultricies nec, pellentesque eu, pretium quis, sem. <span class="user" data-uid="003">Nulla</span> consequat massa quis enim. Nullam dictum <span class="user" data-uid="001">felis eu pede mollis pretium. </span><span class="user" data-uid="002"><span class="user" data-uid="001">Integer</span> tincidunt.</span> Cras dapibus.
</p>编辑：
我发现了一个更好的解决方案，可以解决使用“display:inline-block”时引起的换行问题：
p { width:150px; line-height:2em; }
span.annotation { border-bottom:1px solid; }
span.annotation span.annotation { padding-bottom:2px; }
span.annotation span.annotation span.annotation { padding-bottom:4px; }
span.annotation span.annotation span.annotation span.annotation { padding-bottom:6px; }
span[data-uid="001"] { border-color:orange; }
span[data-uid="002"] { border-color:blue; }
span[data-uid="003"] { border-color:red; }
span[data-uid="004"] { border-color:green; }<p>
Lorem <span class="annotation" data-uid="004">ipsum dolor <span class="annotation" data-uid="001">sit amet, <span class="annotation" data-uid="002">consectetuer adipiscing</span> elit.</span> Aenean commodo ligula eget dolor. Aenean massa. <span class="annotation" data-uid="002">Cum sociis <span class="annotation" data-uid="001">natoque penatibus et <span class="annotation" data-uid="003">magnis</span> dis parturient montes, nascetur</span> ridiculus mus.</span> Donec quam felis, ultricies nec, <span class="annotation" data-uid="002">pellentesque eu, </span><span class="annotation" data-uid="001"><span class="annotation" data-uid="002">pretium</span> quis, sem.</span> Donec pede justo, fringilla vel, aliquet nec,</span> vulputate eget, arcu.
</p>像这样执行
p {
text-decoration: underline overline line-through;
border-top: 3px solid red;
border-bottom: 3px solid green;
display: inline-block;
padding: 2px 0 0 0;
font-size: 50px;
margin: 0;
}<p>Test</p>看起来他们只是使用了上划线和下划线的组合。
http://www.fileformat.info/info/unicode/char/0332/browsertest.htm
http://www.fileformat.info/info/unicode/char/0305/browsertest.htm
我不确定你能否使组合下划线的颜色与文本不同，但在某些浏览器中，可以更改文本装饰的颜色。 修改下划线颜色
这对我在Chrome中不起作用。
.example {
text-decoration: underline;
-webkit-text-decoration-color: red;
-moz-text-decoration-color: red;
/* vendor prefix not required as of V36 */
text-decoration-color: red;
/* color: green; */
}<b class="example">text-decoration</b> <br/>
<b style="color:red">u̲n̲d̲e̲r̲l̲in̲̲̲̲̲e̲<b><br/>
p {
font-family:tahoma;
font-size:16px;
}
span {
border-bottom:1px solid blue;
position:relative;
display:inline-block;
}
span:before {
content:'';
position:absolute;
left:0;
bottom:-3px;
border-bottom:1px solid red;
display:block;
width:100%;
}
span:after {
content:'';
position:absolute;
left:0;
bottom:-5px;
border-bottom:1px solid green;
display:block;
width:100%;
}<p>
non-decorated text <span>decorated text</span> non-decorated <span>decorated text</span>
not decorated
</p>
border-bottom和text-decoration: underline结合起来。 - display-name-is-missing