如何在文本的不同子部分下创建多个重叠下划线

Question

我想创建一个功能，用户可以在其中注释文本的不同子部分。当注释完成后，下划线将显示在文本的该部分下。我怎么能用HTML / CSS创建这个效果？

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

你无法直接使用HTML和CSS。

您可以在编写自定义代码和creating a custom Canvas/SVG solution的现代浏览器中执行此操作。但这很难做到。尝试寻找一些可以帮助你做到这一点的图形库。