Nascondi elemento, ma mostra contenuto generato CSS

Question

C'è un modo per nascondere il contenuto di un elemento, ma mantenere il suo contenuto :before visibile? Dire che ho il seguente codice:

HTML:

<span class="addbefore hidetext">You are here</span> 

CSS:

.addbefore:before { 
    content: "Show this"; 
} 
.hidetext { 
    // What do I do here to hide the content without hiding the :before content? 
} 

ho provato:

• utilizzando display: none e l'impostazione display: inline su :before, ma entrambi sono ancora nascosti
• utilizzando width: 0; overflow: hidden, ma poi spazio aggiuntivo sembra da aggiungere
• usando colore: trasparente ;, ma poi, naturalmente, il contenuto della campata assume ancora spazio
• utilizzando text-indent: -....px, ma
  (?)
  1. questo è visto di buon occhio dai motori di ricerca e
  2. sembra di non lavorare per elementi span (?)

Eventuali altre idee a come potrei fare questo?

Answer 1

Pulisci soluzione

Si potrebbe usare visibility: hidden, ma con questa soluzione, il contenuto nascosto sarà ancora occupare spazio. Se questo non importa a voi, questo è come si dovrebbe fare:

span { 
    visibility: hidden; 
} 

span:before { 
    visibility: visible; 
} 

---

Hackish soluzione alternativa

Un'altra soluzione potrebbe essere quella di impostare la font-size della campata a zero * ad un valore veramente piccolo. Vantaggio di questo metodo: il contenuto nascosto non occupa spazio. Svantaggio: non sarà possibile utilizzare le unità relative come em o% per la dimensione carattere del contenuto di :before.

span:before { 
    content: "Lorem "; 
    font-size: 16px; 
    font-size: 1rem; /* Maintain relative font-size in browsers that support it */ 
    letter-spacing: normal; 
    color: #000; 
} 

span { 
    font-size: 1px; 
    letter-spacing: -1px; 
    color: transparent; 
} 

Example on jsfiddle.

Update (4 maggio 2015): Con CSS3, è ora possibile utilizzare l'unità rem (Root EM) per mantenere la relativa dei font-formati nell'elemento :before. (Browser support.)

---

* Una versione precedente di questo post ha suggerito impostare la dimensione del carattere a zero. Tuttavia, questo non funziona come desiderato in alcuni browser, perché il CSS non definisce quale comportamento è previsto when the font-size is set to zero. Per la compatibilità cross-browser, usa una piccola dimensione come sopra menzionata.

Answer 2

Non penso sia possibile con puro css e html. Guardando questo esempio http://jsbin.com/efeco4 vedrai che ciò che è all'interno della proprietà content di css, è avvolto dall'elemento. Quindi qualsiasi manipolazione dell'elemento influenzerà anche il css content.

Quindi un pensiero alternativo potrebbe essere quello di utilizzare jquery, per svuotare il contenuto html all'interno del tag div con classe hidetext senza influenzare lo content di css. Un codice di esempio potrebbe essere questo:

$('.hidetext').empty(); 

Esempio: http://jsbin.com/efeco4/2

Answer 3

Per un migliore supporto del browser:

Avvolgere il testo che dovrebbe essere nascosto all'interno di un ulteriore elemento span, e applicare le classi a che si estendono per nascondere il testo che si desidera nascondere.

HTML:

<span class="addbefore"> 
    <span class="visuallyhidden>This text will not show.</span> 
</span> 

CSS:

.addbefore:before { 
    content: "Show this"; 
} 

.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
} 

La classe .visuallyhidden utilizzato sopra è dalla versione corrente di HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

I vantaggi di questa soluzione:

• Semantic HTML
• Supporto completo del browser
• Nessun problema con il testo piccolo come altri piccoli font-size soluzioni.
• Il contenuto nascosto non avrà spazio

vederlo in azione qui: http://jsfiddle.net/tinystride/A9SSb/