如何在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