Displaying the ruble icon on the page while the code should contain rub?

Question

css

How can I display the ruble icon on the page while the code should say rub?
Example:
<span>Руб</span>and on the page there will be a ruble icon.

Answer 1

the icon can be made a pseudo-element, and the block with the text itself can be hidden. but it is not clear why this is needed
example on the codepen
note that a special font is connected to display the character

Answer 2

In your case, you can do this: https://jsfiddle.net/j8gaLsu8/14/
If without JS, then only with the addition of a class, css cannot read the content of the tag

Answer 3

Doing so is ugly