Абсолютное позиционирование и фоновая зажим ⇐ CSS

[Anonymous]

Я пытаюсь добиться градиентного текстового эффекта. Для этой цели я использую текст с прозрачным заполнением и фоновым зажимом: Text; . Некоторые из персонажей в DIV абсолютно позиционируются. Однако, как только символ находится в контейнере с позицией: Absolute; , он больше не зажимает фон и становится невидимым из -за заполнения: прозрачный . Можно ли достичь заполнения градиента текста с абсолютно позиционированными детьми? Если так, как?

Код: Выделить всё

div {
width: 8em;
padding: 1em;
}

div.gradient {
color: transparent;
background: linear-gradient(to right, red, rebeccapurple);
background-clip: text;
}

span:nth-child(2) {
position: absolute;
left: 1.5em;
top: 2.5em;
}< /code>


A
B
C



A
B
C

codepen
Для контекста я использую библиотеку Numberflow, которая использует абсолютное позиционирование для цифров, присутствующих в DOM для переходов и хочу объединить этот эффект с градиентным заполнением.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... round-clip