之后元素仅适用于跨度

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

我的评论中的演示;）

  

将范围设为相对，绝对子级将使用它作为齿龈参考

.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>

内嵌阴影可以通过一条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>

Answer 2

必须是:: after吗？

.hero_title .yellow-under {
  border-bottom: 16px solid #FFD400;
}

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

如果没有，请使用它。

.hero_title .yellow-under {
  position: relative;
}

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

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