如何避免.n-af8170类元素的背景覆盖其::before伪元素的占用区域

问题原因 #

你遇到的问题是因为.n-af8170类直接作用在<p>标签上，元素默认的背景会覆盖自身整个盒区域，浮动的::before伪元素属于p标签的内容占位，自然会被父元素的背景覆盖。 #

方案1：文本加包裹标签（效果最可控） #

无需修改原有CSS，仅调整HTML结构，把渐变背景类挪到文本的包裹span上即可：

<p class="n-bullet-silhouette-1-004077">
  <span class="n-af8170">Lorem ipsum</span>
</p>

如果需要适配圆角的显示效果，可以给.n-af8170补充少量样式：

.n-af8170 {
  /* 原有样式不变 */
  display: inline-block;
  padding: 0.3rem 0.8rem;
}

方案2：不修改HTML，仅调整CSS #

如果你无法改动DOM结构，可以通过调整内边距+背景裁剪范围实现需求：

.n-bullet-silhouette-1-004077::before {
  /* 原有样式不变 */
  /* 新增：将伪元素拉到左侧内边距区域 */
  margin-left: calc(-3rem - 10px);
}

.n-af8170 {
  /* 原有样式不变 */
  /* 新增：左内边距等于伪元素总占位宽度 */
  padding-left: calc(3rem + 10px);
  /* 新增：背景仅显示在内容区域，不覆盖内边距 */
  background-clip: content-box;
}

内容的提问来源于stack exchange，提问作者Kifsif