CSS响应式换行时文本背景高亮不跟随文本的解决方法

当前实现给元素设置了display: inline-block，会将整段文本包裹为一个独立的行内块盒，:after伪元素是相对于这个整块做绝对定位的，仅会生成一个固定尺寸的高亮条。当文本响应式换行时，伪元素无法跟随拆分后的每行文本单独渲染，就会出现错位。

删掉原有伪元素相关样式，改用行内元素背景渐变+box-decoration-break属性实现，该属性可以让行内元素换行时，每行单独渲染背景、边距样式，完美适配多行场景：

.background-highlight {
  color: #faf9f4;
  /* 改为普通行内元素，移除inline-block设置 */
  display: inline;
  /* 用线性渐变绘制10px高的居中黄色高亮条，和原有视觉效果完全一致 */
  background: linear-gradient(
    transparent 0,
    transparent calc(50% - 5px),
    #cef230 calc(50% - 5px),
    #cef230 calc(50% + 5px),
    transparent calc(50% + 5px)
  );
  /* 核心属性：换行后每行独立渲染背景样式，兼容webkit内核浏览器需加前缀 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* 可选：加左右内边距让高亮条比文字稍宽，视觉效果更自然，可按需调整数值 */
  padding: 0 4px;
}

/* 完全删除原有.background-highlight:after的所有样式，无需伪元素即可实现效果 */

• 单行场景和原有效果完全一致
• 任意宽度下文本换行，每一行都会生成独立的居中黄色高亮条，不会出现错位、穿模问题
• 不需要额外定位逻辑，兼容性覆盖绝大多数主流浏览器

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