文本下划线在文本后面的偏移量

Question

我想在文本后面显示 50% 的下划线。像这样

当我尝试使用text-underline-offset负值时，下划线将被隐藏。但如果负值足够高，它将显示在文本上方。

我希望“第三个链接”在文本后面稍微显示下划线。我可以添加什么东西来让它工作吗？

代码是 https://jsbin.com/kecuxitiha/edit?html,css,output

超文本标记语言

    Lorem Ipsum is simply dummy <a href="#" class="first">First Link</a> text <a href="#" class="second">Second Text</a> of 
      the printing and typesetting industry.  <a href="#" class="third">Third Link</a>
      Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

CSS

a {
  color: red;
  text-decoration-thickness: 6px;
  text-decoration-color: yellow;
}

.second {
  text-underline-offset: -21px;
}

.third {
  text-underline-offset: -4px;
}

Answer 1

一些创造性地使用伪元素可以帮助解决这个问题。

.underline::after {
  content: '';
  background-color: yellow;
  height: 12px;
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -8%;
  z-index: -1;
}
.underline {
  position: relative;
}
p {
  font-size: 1.5em;
}

<p>This is some text with a <span class="underline">special</span> underline</p>