如何基于上下文文本在CSS中修改::before伪元素的颜色？

我编写了一段CSS代码，用于为特定文本元素应用渐变背景，渐变配置由span标签的宽度决定。由于纯CSS无法直接访问元素的上下文文本，因此采用了这种基于宽度的实现方案：

span {
    width: fit-content !important;
    color: #0000;
    background:
        linear-gradient(rgb(247, 117, 110) 0 0) 0/calc(70px - 100%) 100%,
        linear-gradient(hsl(123, 90%, 40%) 0 0) 0/calc(100px - 100%) 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

span::before {
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 0.5em;
    width: 0.5em;
    height: 0.5em;
    vertical-align: 0.1em;
    background: #d2d7f5;
}

<span>Upcoming</span>
<span>Past</span>
<span>Upcoming</span>
<span>Past</span>

请问是否可以让::before伪元素的背景色也基于span元素的上下文文本进行修改？

纯CSS无法直接读取元素的文本内容来动态调整样式，原方案依赖文本宽度的实现不仅不稳定（文本宽度会受字体、字号、渲染环境影响），也没法延伸到伪元素的背景色控制。要实现需求，推荐用类名标记或自定义数据属性的方式，精准绑定文本内容与样式：

方案1：使用类名区分文本 #

修改HTML，给不同文本的span添加对应类名：

<span class="upcoming">Upcoming</span>
<span class="past">Past</span>
<span class="upcoming">Upcoming</span>
<span class="past">Past</span>

调整CSS，通过类名分别控制文本渐变和伪元素背景色：

/* 通用span基础样式 */
span {
    width: fit-content !important;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Upcoming对应的样式 */
span.upcoming {
    background: linear-gradient(rgb(247, 117, 110) 0 0);
}
span.upcoming::before {
    background-color: rgb(247, 117, 110);
}

/* Past对应的样式 */
span.past {
    background: linear-gradient(hsl(123, 90%, 40%) 0 0);
}
span.past::before {
    background-color: hsl(123, 90%, 40%);
}

/* 通用伪元素样式 */
span::before {
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 0.5em;
    width: 0.5em;
    height: 0.5em;
    vertical-align: 0.1em;
}

方案2：使用自定义数据属性 #

如果偏好更语义化的标记，可以给span添加data-*属性：

<span data-status="upcoming">Upcoming</span>
<span data-status="past">Past</span>
<span data-status="upcoming">Upcoming</span>
<span data-status="past">Past</span>

用CSS属性选择器匹配并设置样式：

/* 通用span基础样式 */
span {
    width: fit-content !important;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

/* 匹配data-status为upcoming的元素 */
span[data-status="upcoming"] {
    background: linear-gradient(rgb(247, 117, 110) 0 0);
}
span[data-status="upcoming"]::before {
    background-color: rgb(247, 117, 110);
}

/* 匹配data-status为past的元素 */
span[data-status="past"] {
    background: linear-gradient(hsl(123, 90%, 40%) 0 0);
}
span[data-status="past"]::before {
    background-color: hsl(123, 90%, 40%);
}

/* 通用伪元素样式 */
span::before {
    border-radius: 50%;
    content: "";
    display: inline-block;
    margin-right: 0.5em;
    width: 0.5em;
    height: 0.5em;
    vertical-align: 0.1em;
}

这两种方案都能稳定实现“伪元素背景色随span文本内容变化”的需求，同时避免了原方案依赖文本宽度的不确定性。

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