jquery - CSS "underline"文本部分

Question

如何为文本添加“下划线”以获得与“测试”下相同的效果？

我尝试将 TEST 封装在 span 中，并添加一个绝对的 :after 和 position:absolute，但我认为这不是正确的方法，并且无法以获得预期的结果。

这是 HTML

<h1 class="white hero-text">
    <span class="thin">ALL THIS TEXT IS</span>
    <br>
    <span class="bold striked">A TEST</span>
</h1>

Answer 1

你说你尝试过 :after 。这是正确的解决方案。请参阅下面的片段。您可以更改值

.striked {
  position: relative
}

h1 {
  text-align: center;
}

.striked:after {
  height: 50%;
  width: 150%;
  left: -25%;
  background: red;
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -1
}

<h1 class="white hero-text">
    <span class="thin">ALL THIS TEXT IS</span>
    <br>
    <span class="bold striked">A TEST</span>
</h1>