Visivamente nascondere il contenuto, ma non il contenuto pseudo

Question

sto usando un modello come questo per aggiungere le icone tramite contenuti :before o :after pseudo:

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

Come posso nascondere visivamente il testo di assistenza senza nascondere .icon contenuti pseudo? Né il testo di aiuto né lo spazio che occupa dovrebbero essere visti, in modo tale che queste icone possano essere utilizzate in linea. Quando .is-content-visually-hidden viene disattivato, il testo dovrebbe essere visibile. Ho provato varie tecniche come text-indent: -9999px inutilmente.

This codepen demonstrates the problem.

Answer 1

L'approccio semplice è quello di impostare del testo interno font-size-0 e quindi reimpostare carattere pseudo-elemento alla normalità per renderlo visibile:

.is-content-visually-hidden { 
    font-size: 0; 
} 

.icon__star::before { 
    content: "*"; 
    font-size: 32px; 
} 

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

approccio però più flessibile è quello di disporre il testo in un altro arco:

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

e nascondere solo span.

Answer 2

È necessario avvolgere il testo interno in un intervallo e nasconderlo per sicurezza. Ma se non siete in grado di farlo, allora si potrebbe provare

font-size: 0