如何让mark标签的伪元素背景随文本换行适配？

我有如下HTML代码：

<p>Lorem ipsum dolor, sit <mark>adipisicing  adipisicing elit</mark> adipisicing elit. 
Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur 
quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

我想给<mark>标签添加高亮样式。通常会直接设置背景色，但现在有个来自CMS的CSS变量--site-color: #dc2626（无法修改），而且不知道怎么给这个变量添加透明度。

我试过把<mark>设为相对定位，再添加一个带纯色背景、透明度0.1的绝对伪元素，但这个方法只在<mark>文本单行时生效，文本换行（小屏幕或长文本）就失效了。

请问怎么让这个伪元素像背景一样随文本换行？

我的尝试代码 #

CSS #

:root {
  --site-color: #c026d3; /* 无法修改 */
}

p mark {
    position: relative;
    color: inherit;
    background: inherit;
    padding-left: 1px;
    padding-right: 1px;
}

p mark::before {
    position: absolute;
    content: "";
    display: inline-flex;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--site-color);
    opacity: 0.2;
    border-radius: 2px;
    z-index: -1;
}

HTML #

<h2>文本较短时正常生效</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

<br />

<h2>文本过长换行时失效</h2>
<p>Lorem ipsum dolor, sit <mark>adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad! adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</mark> adipisicing elit. Debitis amet quasi deserunt possimus neque laborum, suscipit obcaecati quae pariatur quia sit provident, ipsum iusto quos, aliquid ut eveniet beatae ad!</p>

方法1：修复伪元素换行问题 #

你的伪元素方案失效是因为绝对定位的块无法随行内元素的换行拆分。给<mark>设置display: inline，并给伪元素添加box-decoration-break: clone属性，就能让伪元素在换行时自动拆分适配每一行：

:root {
  --site-color: #c026d3; /* 无法修改 */
}

p mark {
  position: relative;
  color: inherit;
  background: transparent;
  padding: 0 1px;
  display: inline;
}

p mark::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--site-color);
  opacity: 0.2;
  border-radius: 2px;
  z-index: -1;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容Chrome、Safari等webkit内核浏览器 */
}

方法2：直接生成带透明度的背景色（更简洁） #

如果不需要伪元素的额外样式，推荐用CSS的color-mix()函数将原颜色与透明色混合，直接生成带透明度的背景色，无需伪元素，自然支持文本换行：

:root {
  --site-color: #c026d3; /* 无法修改 */
}

p mark {
  color: inherit;
  /* 通过混合原颜色和80%透明的白色，实现20%不透明度的高亮背景 */
  background-color: color-mix(in srgb, var(--site-color), transparent 80%);
  padding: 0 1px;
  border-radius: 2px;
}

这个方法更简洁，避免了定位和伪元素的换行适配问题，完美利用现有CSS变量实现需求。

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