Ukryj element, ale wyświetl zawartość generowaną przez CSS.

Question

Czy istnieje sposób na ukrycie zawartości elementu, ale zachowaj jej zawartość :before? Say mam następujący kod:

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? 
} 

Próbowałem:

• użyciu display: none i ustawienie display: inline na :before, ale oba są nadal ukryte
• pomocą width: 0; overflow: hidden, ale wówczas dodatkowa powierzchnia wydaje się być dodawane
• pomocą koloru przezroczysta ;, a następnie, oczywiście, zawartość rozpiętości nadal zajmuje przestrzeń
• pomocą text-indent: -....px, ale
  (?)
  1. to jest mile widziana przez wyszukiwarki i
  2. to nie wydaje się działać dla elementów przęseł (?)

jakieś inne pomysły jak w jaki sposób mogę to zrobić?

Answer 1

Clean Rozwiązanie

Można użyć visibility: hidden, ale z tego rozwiązania, ukrytą treść będzie nadal zajmują miejsce. Jeśli to nie dla ciebie znaczenie, to w jaki sposób to zrobić:

span { 
    visibility: hidden; 
} 

span:before { 
    visibility: visible; 
} 

---

hackish alternatywne rozwiązanie

Innym rozwiązaniem byłoby ustawienie font-size rozpiętości zeru * do naprawdę małej wartości. Zaleta tej metody: ukryta zawartość nie zajmie żadnej przestrzeni. Wadą: Nie będziesz w stanie użyć jednostek względnych, takich jak em lub%, do rozmiaru czcionki zawartości :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 (04 maja 2015): Z CSS3, można teraz używać rem (EM) jednostki głównej, aby utrzymać względne rozmiary czcionki w elemencie :before. (Browser support.)

---

* Poprzednia wersja tego postu sugerowała ustawienie rozmiaru czcionki na zero. Nie działa to jednak w niektórych przeglądarkach, ponieważ CSS nie definiuje oczekiwanego zachowania when the font-size is set to zero. Aby zapewnić kompatybilność z różnymi przeglądarkami, użyj małego rozmiaru czcionki, jak wspomniano powyżej.

Answer 2

Nie sądzę, że jest to możliwe z czystym css i html. Patrząc na ten przykład http://jsbin.com/efeco4 zobaczysz, że to, co jest w środku content właściwość css, jest opakowane przez element. Tak więc każda manipulacja elementem będzie również wpływać na css content.

Alternatywną myślą może być użycie jquery, aby opróżnić zawartość html wewnątrz tagu div z klasą hidetext bez wpływu na wartość parametru css: content. Próbkę kodu może być to:

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

Przykład: http://jsbin.com/efeco4/2

Answer 3

Dla lepszego wsparcia przeglądarki:

Wrap tekst, który powinien być ukryty w dodatkowym span elementu i zastosować klas do tej rozpiętości, aby ukryć tekst, który ma być ukryty.

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; 
} 

Klasa .visuallyhidden użyte powyżej jest od aktualnej wersji HTML5 Boilerplate: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

zalety tego rozwiązania:

• Semantic HTML
• Pełna obsługa przeglądarki
• Żadnych problemów z maleńkim tekst jak inne małe font-size rozwiązań.
• Ukryta treść nie zajmie miejsca

Zobacz go w akcji tutaj: http://jsfiddle.net/tinystride/A9SSb/