需要HTML / CSS堆叠下划线

Question

出于科学目的，我们需要将文本的样式设置为类似于下划线，但它必须是颜色，甚至更重要：堆叠。例如，基本上同一个词可以用红色直线加下划线，同时用绿色波浪下划线加下划线。在我们用于Windows的旧编辑器中，我们有六个不同装饰的五个级别，但现在浏览器仅仅两个就足够了。有没有办法实现这个目标？

所以我们需要至少三种不同风格的下划线（例如直线，点缀，波浪形，但无所谓，这可能是任何类型的装饰），每一行都必须是它自己的颜色，并在同一个词下至少画两个。

我们已经使用了文字颜色，背景颜色和字体，所以这不是一个选项。

Answer 1

如果您能够使用伪元素:before和:after，此解决方案将起作用。

您可以使用任何需要下划线的文本并将其包装在<span>标记中。然后，您可以设置<span>及其:before和:after伪元素的样式。

确保<span>元素position设置为relative。这将允许您相对于跨度定位伪元素，而不是在DOM中更高的位置。

修改

您想要加下划线的任何字词/句子都应包含在<span></span>标记中，并提供下划线类;以及任何下划线样式类（.info, .alert, .warning）。

我们可以从以下位置更新以下代码段：

<span class="alert info warning underline">dolor sit amet,consectetur adipisicing elit.</span>

为：

<span class="alert info underline">dolor sit amet, <span class="warning underline">consectetur</span> adipisicing elit.</span>

正如您所看到的，我们在<span class="underline warning"></span>中包含了consectetur这个词，允许它继承父级跨度.info和.alert下划线，同时将其自己的.warning下划线添加到混合。

p{
    line-height: 1.5em;
}
.underline{
    position: relative;
}
.alert:before{
    position: absolute;
    content: "";
    border-bottom: solid 1px red;
    width: 100%;
    height: 102%;
    left: 0;
}
.info:after{
    position: absolute;
    content: "";
    border-bottom: dashed 1px blue;
    width: 100%;
    height: 135%;
    left: 0;
}
.warning{
    border-bottom: dotted 1px green;
}

<p>Lorem ipsum <span class="alert info underline">dolor sit amet, <span class="warning underline">consectetur</span> adipisicing elit.</span> Eveniet fugit ducimus debitis eos quos maxime labore voluptatem qui iusto consequuntur quod mollitia deleniti quia possimus dicta nihil autem blanditiis quidem!</p>