Transparent gradient to last 3 characters in dynamic length string?

Question

css

There is a string of dynamic length (by characters and sizes), how to make the last 3 characters "fade"?

Now I made a pseudo-element with a gradient on top of the text, which is absolutely positioned to the right, but this is not entirely correct because:
1. The background of the parent can be different, but for now I'm only on white
2. The font size can be different + caps, spaces, W and M have different widths

I would like to work specifically with the text, I saw you can apply a gradient to the text, but this will not work everywhere + the font color can also be different

I would like some unified component, but with a pseudo-element that has a transparency gradient - >color is too custom



Can you please tell me how these things are usually handled?

Answer 1

For example like this