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

Question

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

您可以看到黄色下划线（突出显示）仅使其达到“A”，但它应该位于“Flowster Affiliate Program”下方：

但是，HTML 看起来像这样：

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

yellowhighlight CSS 类看起来像：

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

使用背景来实现：

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>

Answer 2

需要对现有 HTML 和 CSS 进行最少更改的解决方案

在阅读了所有的cmets和所有答案后，我想出了一个解决方案。

我的主要目标不是更改任何 HTML（即，相同的结构、相同的类），也不是更改您想要实现下划线的方式（即，使用 ::after）。我已经使用 Chrome DevTools 测试了我的解决方案，以确保它可以正常工作。

说明

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

你只需要做两件事：

1. 你可以用“溢出”来实现连续的下划线。这可以通过设置width: 120%;来完成。

2. 但您不想“溢出”最后一个 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

问题是没有设置宽度。要使黄色突出显示整个文本宽度，只需将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