CSS：基线处的样式化下划线

Question

如何向 CSS 中的内联元素添加下划线，即 (1.) "stylable" 和 (2.) 在基线处（与仅使用 border-bottom 的解决方案不同或框阴影）？

这是针对响应式布局的，因此下划线必须能够跨越多行。此外，它不能替换可能与 link.

内联的任何其他（非下划线）文本

这是演示所需效果的模型。

提前致谢！

Answer 1

我不知道你为什么不能使用 border-bottom 但试试这个：

<!DOCTYPE html>
<html>
    <style>
    </style>
    <body>
        <a><u>LINK OVER </u><br><u>MULTIPLE</u> LINES</a><br><br>
        <a><span style="border-bottom: blue solid 3px;">LINK OVER 
<br>MULTIPLE</span> LINES</a><br><br>
      <a><span style="text-decoration: underline;  text-decoration-color: 
blue;">LINK OVER<br>MULTIPLE </span> LINES</a>
    </body>
</html>

Answer 2

对于所有感兴趣的人，这是我提出的解决方案。它只适用于纯色背景。

background: linear-gradient(white, white), linear-gradient(blue, blue);
background-position: 0px calc(1em + 5px), 0px 1em;
background-repeat: repeat-x;
color: black;
background-color: white;

Answer 3

我认为您希望使用伪元素来设置下划线的样式。我也在悬停时放了一个简单的动画来展示它的灵活性。

h1 {
  position: relative;
}

h1::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  z-index: -1;
  background: aqua;
  height: 2px;
  width: 200px;
  transition: width 0.3s;
}

h1:hover::before {
  width: 300px;
}

<h1>This is a styleable baseline</h1>

CSS：基线处的样式化下划线

CSS: Stylable Underline at Baseline

html

css

text

underline