Visually hide content, but not pseudo-content

Question

I use such a template to add icons through the alias :before or :after :

 <span class="icon icon__example is-content-visually-hidden">assistive text</span> 

How can I visually hide auxiliary text without hiding the .icon alias? Neither auxiliary text nor the space it occupies should be noticed at all, so these icons can be used inline. When .is-content-visually-hidden switches, the text should be visible. I tried various methods such as text-indent: -9999px no avail.

This codemon demonstrates the problem .

Answer 1

A simple approach is to set the internal text font-size to 0 , and then reset the pseudo-element font to its normal state to make it visible:

 .is-content-visually-hidden { font-size: 0; } .icon__star::before { content: "*"; font-size: 32px; } 

Demo: http://codepen.io/anon/pen/zxWQRX

However, a more flexible approach is to move the text to another range:

 <i class="icon icon__star is-content-visually-hidden"> <span>star</span> </i> 

and hide the span .

Answer 2

You have to wrap the inner text in the gap and hide it to be sure. But if you cannot do this, you can try

 font-size: 0