[SOLVED] How to make text look like password with CSS style?

How to make text look like password with CSS style?

I have the following piece of HTML, generated by the js (codemirror). I'm creating an overlay mode, and I'm able to specify the style name for the parsed token.

<span class="text">Data Source=myServer;User ID=sa;Password=</span>
<span class="hiddenText">12345</span>
<span class="text">;</span>

I thought that once the token is parsed and the style is set, the work should be done, since you can do anything with the CSS, right?

But now I realize that I don't know how to make "12345" string to look like password with CSS styles. It can be replaced with stars (but only visually), hidden behind a plate of any kind, etc. But it should be editable and copy-able.

IDEA Is there a special font I can use may be?

Solution

2 ways - both make real content invisible on top, but absolutely visible in source html code, more - the ::before and ::after are always in source invisible

.hiddenText{ font-size: 0}             /* this makes span real content zero size width & height */
.hiddenText::before{ content: '∗∗∗∗∗'; font-size: initial}  

.HiddenText{ color: transparent; }    /* span will be as long as real content + ::before */
.HiddenText::before{ content: '∗∗∗∗∗'; color: initial}

<span class="hiddenText">I'm so secret</span>
<hr>
<span class="HiddenText">I'm so secret</span>

∗ this is html &lowast;
color set as you wish
css is case sensitive - correct second span for your page

Choose best for you - other parent or child elements may affect as css is hereditary