如何在CSS中完成此粗偏移下划线？

Question

我正在尝试完成这种下划线样式，但我尝试的所有方法均无效。这是我在其上找到的实际网站的链接。 https://www.timeout.com/newyork/music/best-music-videos-of-all-time

Answer 1

通常最好向我们展示您的尝试，这样我们可以帮助您理解概念或纠正您犯的任何错误。想法是使文本下面有另一个具有负上边距的元素。还有其他方法可以完成同一件事，每种方法都有用例和优缺点。

该概念在代码中如下所示：

.border-bottom {
  width: 100%;
  height: 10px;
  background-color: red;
  margin-top: -30px;
}

<div>
  <h2>
    bla bla bla
  </h2>
  <div class='border-bottom'>
  
  </div>
</div>

Answer 2

您可以通过将伪元素放置在“父”元素的底部并将其z-index设置为-1来使用伪元素来完成外观。

参见此处：https://codepen.io/anon/pen/JVNjLX

.link {
  position: relative;
  font-family: Roboto, sans-serif;
  font-weight: 900;
  font-size: 32px;
  text-decoration: none;
  color: #333;
  display: inline-block;
}

.link::before {
  content: "";
  width: 100%;
  height: 16px;
  background-color: pink;
  display: block;
  position: absolute;
  bottom: 2px;
  z-index: -1;
  
}

<a class="link" href="#0">
  Radiohead, Karma Police
</a>

当然，您可以使用这些值来获得所需的外观，甚至在悬停时对伪元素进行动画处理。

您所引用的网站实际上通过在元素上带有渐变背景图像来实现此效果。很漂亮

您可以在此处查看实际操作：https://codepen.io/anon/pen/ZZKEwE