css - 元素后仅适用于跨度

Question

我有一段这样的代码..

.hero_title .yellow-under::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 100%;
  right: 0;
  left: 0;
  height: 16px;
  background-color: #FFD400;
  transform: translateY(250%);
}

<div class="hero_title">
  <h1>
    <span class="yellow-under">HOW TO:</span>
  </h1>
</div>

它应该只是“下划线”单词“How To:”，但这条线一直贯穿整个 div。有没有办法将它限制在跨度内？

Answer 1

来 self 评论的演示 ;)

make the span relative and the absolute child will use it for coordonates reference

.hero_title .yellow-under::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 100%;
  right: 0;
  left: 0;
  height: 16px;
  background-color: #FFD400;
  transform: translateY(250%);
}

.yellow-under {
  position: relative;
}

<div class="hero_title">
  <h1>
    <span class="yellow-under">HOW TO:</span>
  </h1>
</div>

inset shadow 可以从单个 CSS 行实现视觉效果

.hero_title span {
  box-shadow: inset 0 -16px #FFD400;
}

<div class="hero_title">
  <h1>
    <span class="yellow-under">HOW TO:</span>
  </h1>
</div>

渐变也是一样

.hero_title span {
  background:linear-gradient(#FFD400,#FFD400) bottom/100% 16px no-repeat;
}

<div class="hero_title">
  <h1>
    <span class="yellow-under">HOW TO:</span>
  </h1>
</div>