Question

如何在CSS中的内联元素中添加下划线，即（1.）“stylable”和（2.）在基线处（与仅使用border-bottom或box-shadow的解决方案不同）？

这是针对响应式布局，因此下划线必须能够覆盖多行。此外，它不能替换可能与链接内联的任何其他（非下划线）文本。

这是一个展示预期效果的模型。

Catching multiple exception types in one catch block

提前致谢！

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

对于每个感兴趣的人，这是我提出的解决方案。它只适用于稳固的背景。

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;

CSS：基线的可设置下划线

3 个答案: