Прозрачный градиент на последние 3 символа в строке динамичной длинны?
Есть строка, динамичной длинны (по символам и размерам), как сделать "выцветание" последних 3 символов ?
Сейчас сделал псевдоэлемент с градиентом поверх текста, который абсолютно позиционирован вправо, но это не совсем правильно тк:
1. Фон у родителя может быть разным, а я пока заложился только на белый
2. Размер шрифта может быть разным + капсы, пробелы, Ш и М имеют разную ширину
Хотелось бы как-то работать конкретно с текстом, видел можно применять градиент к тексту, но это не везде будет работать + цвет шрифта тоже может быть разным
Хотелось бы какой-то унифицированный компонент, а с псевдоэлементом который имеет градиент прозрачность -> цвет получается слишком кастомно
Подскажите пожалуйста, как обычно такие вещи решаются ?