如何在不同的文本小节下创建多个重叠的下划线答案

【问题标题】：How to create multiple overlapping underlines under different subsections of text如何在不同的文本小节下创建多个重叠的下划线
【发布时间】：2015-07-07 00:49:59
【问题描述】：

我想创建一个功能，用户可以在其中注释文本的不同小节。进行注释后，该部分文本下方将显示下划线。如何使用 HTML/CSS 创建这种效果？

【问题讨论】：

在这里寻找另一个答案：stackoverflow.com/questions/40861062/…

标签： html css underline

【解决方案1】：

你可以用线性渐变来实现这种下划线效果：

span {
    line-height: 20px;
    background: linear-gradient(0deg, green 1px, white 1px, transparent 1px);
    background-position: 0 100%;
}
.two {
    line-height: 24px;
    padding-bottom: 4px;
}
.three {
    line-height: 28px;
    padding-bottom: 8px;
}

&lt;p&gt;&lt;span class="one"&gt;Lorem ipsum &lt;span class="two"&gt;dolor&lt;/span&gt; sit amet,&lt;/span&gt;consectetur adipiscing elit. &lt;span class="one"&gt;Maecenas &lt;span class="two"&gt;&lt;span class="three"&gt;finibus&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="two"&gt; aliquam eros eget accumsan.Pellentesque quis &lt;span class="three"&gt;diam lacus.&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;

请注意，我没有为线性渐变插入供应商前缀

【讨论】：

简单有效！
@web-tiki 谢谢。在我的示例中，如何执行与“Tempor”重叠的前两行之类的操作？
@PeterR 我用重叠线示例编辑了答案。
在 Firefox 上看起来不错。在 Chrome 上，“finibus”和“aliquam”的.two 下划线之间有一个微小的差距。

【解决方案2】：

您不能直接使用 HTML 和 CSS 来做到这一点。

您可以在现代浏览器中编写自定义代码和creating a custom Canvas/SVG solution 来做到这一点。但这是一项非常难做的工作。尝试寻找一些可以帮助您做到这一点的图形库。

【讨论】：