Прозрачный градиент на последние 3 символа в строке динамичной длинны?

Question

[alex4answ]

Есть строка, динамичной длинны (по символам и размерам), как сделать "выцветание" последних 3 символов ?

Сейчас сделал псевдоэлемент с градиентом поверх текста, который абсолютно позиционирован вправо, но это не совсем правильно тк:
1. Фон у родителя может быть разным, а я пока заложился только на белый
2. Размер шрифта может быть разным + капсы, пробелы, Ш и М имеют разную ширину

Хотелось бы как-то работать конкретно с текстом, видел можно применять градиент к тексту, но это не везде будет работать + цвет шрифта тоже может быть разным

Хотелось бы какой-то унифицированный компонент, а с псевдоэлементом который имеет градиент прозрачность -> цвет получается слишком кастомно



Подскажите пожалуйста, как обычно такие вещи решаются ?