黄色下划线 CSS 随机未应用于跨度的全宽

Question

示例： https://flowster.app/flowster-affiliate-program-activation-bonus/

您可以看到黄色下划线（突出显示）只到“A”，但它应该在“Flowster 联盟计划”下方：

然而，HTML 看起来像这样：

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

而 yellowhighlight CSS class 看起来像：

span.yellowhighlight {
  position: relative;
  z-index: 0;
}

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
}

这很奇怪，因为在其他页面上它看起来很正常。

span.yellowhighlight {
  position: relative;
  z-index: 0;
}

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
}

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

Answer 1

问题是未设置宽度。要使黄色突出显示文本的整个宽度，只需将 width: 100% 添加到 span.yellowhighlight::after

最后的 CSS 应该是这样的：

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
  width: 100%;
}

编辑：

保持 CSS 不变，尝试像这样编辑 HTML

<span class="yellowhighlight">Flowster </span>Affiliate Program - Activation Bonus

Answer 2

需要对现有 HTML 和 CSS

进行最少更改的解决方案

看完所有评论和所有答案后，我想出了一个解决方案。

我的主要目标是不改变任何 HTML（即相同的结构，相同的类）并且不改变你想要实现下划线的方式（即使用 ::after).我已经使用 Chrome DevTools 测试了我的解决方案以确保它有效。

说明

诀窍是，当您具有三个 span 元素（即每个单词在一个单独的 span 元素中）时如何实现连续的下划线。

您只需要做两件事：

可以用“溢出”来实现连续的下划线。这可以通过设置 width: 120%;.
来完成
但您不想“溢出”最后一个 span 元素（无论有多少）。这可以通过将 width: 100%; 设置为最后一个 span 元素来完成。

我的解决方案 IRL 的屏幕截图

片段

span.yellowhighlight {
  position: relative;
  z-index: 0;
}

span.yellowhighlight::after {
  content: "";
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  top: 0.8em;
  height: 0.4em;
  border-radius: 2em;
  background: #fffa50;
  z-index: -1;
  width: 120%; /* Change this. */
}

/* Add this. */
span.yellowhighlight:last-child::after {
  width: 100%;
}

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster</span>
  <span class="yellowhighlight">Affiliate</span>
  <span class="yellowhighlight">Program</span>
  - Activation Bonus
</h1>

Answer 3

使用后台实现：

span.yellowhighlight {
  --s:0.4em; /* control the size */
  --d:2px;  /* control the distance */
  background:
    linear-gradient(#fffa50 0 0) 50% calc(100% - var(--d))/calc(100% - var(--s)) var(--s),
    radial-gradient(farthest-side,#fffa50 98%,#0000) bottom var(--d) left  0/var(--s) var(--s),
    radial-gradient(farthest-side,#fffa50 98%,#0000) bottom var(--d) right 0/var(--s) var(--s);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate<br> Program</span> -
  Activation Bonus
</h1>

要理解技巧，请为每个背景层使用不同的颜色：

span.yellowhighlight {
  --s:0.4em; /* control the size */
  background:
    linear-gradient(pink 0 0) bottom/calc(100% - var(--s)) var(--s),
    radial-gradient(farthest-side,blue 98%,#0000) bottom left /var(--s) var(--s),
    radial-gradient(farthest-side,red 98%,#0000) bottom right/var(--s) var(--s);
  background-repeat:no-repeat;
  -webkit-box-decoration-break:clone;
          box-decoration-break:clone;
}

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate Program</span> -
  Activation Bonus
</h1>

<h1 class="elementor-heading-title elementor-size-default">
  <span class="yellowhighlight">Flowster Affiliate<br> Program</span> -
  Activation Bonus
</h1>

黄色下划线 CSS 随机未应用于跨度的全宽

Yellow underline CSS randomly not applied to full width of span

html

css

background-color

elementor

需要对现有 HTML 和 CSS

说明

我的解决方案 IRL 的屏幕截图

片段