根据 CSS 中的上下文文本更改 ::before 伪元素的颜色

Question

我有这个 CSS 代码片段，旨在将渐变背景应用于特定的文本元素。渐变的配置由标签的宽度决定。由于没有替代方法可以使用纯 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>Lorem</span>

有没有办法也根据元素改变 ::before 伪元素的背景颜色？

Answer 1

您可以将该背景属性值分配给变量并在元素和伪元素上使用它。

span {
    --custom-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%;
    background: var(--custom-background);
}

span::before {
    background: var(--custom-background);
}