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

Question

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

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

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

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