Ukryj element, ale pokaż zawartość wygenerowaną przez CSS

Czy istnieje sposób na ukrycie zawartości elementu, ale utrzymanie jego :before zawartości widocznej? Powiedzmy, że 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żywając display: none i ustawiając display: inline na :before, ale oba są nadal ukryte
  • using width: 0; overflow: hidden;, but then additional space seems to be added (?)
  • użycie color: transparent;, ale wtedy, oczywiście, zawartość zakresu nadal zajmuje miejsce
  • używając text-indent: -....px, ale
    1. to jest źle widziane przez wyszukiwarki i
    2. wydaje się, że nie działa dla elementów span (?)
Jakieś inne pomysły, Jak mogę to zrobić?
Author: Yi Jiang, 2011-02-06
Source

3 answers

Czysty Roztwór

Możesz użyć visibility: hidden, ale dzięki temu rozwiązaniu ukryta zawartość będzie nadal zajmowała miejsce. Jeśli to nie ma dla ciebie znaczenia, to tak byś to zrobił: 

span {
    visibility: hidden;
}

span:before {
    visibility: visible;
}

Hackish Alternatywne Rozwiązanie

Innym rozwiązaniem byłoby ustawienie font-size zakresu na zero * na naprawdę małą wartość. Zaleta tej metody: ukryta zawartość nie zajmuje miejsca. Wada: nie będziesz mógł używać jednostek względnych, takich jak em lub % dla wielkość czcionki :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;
}

Przykład na jsfiddle.

Aktualizacja (Maj 4, 2015): W CSS3 możesz teraz użyć jednostki rem (Root EM), aby utrzymać względne rozmiary czcionek w elemencie :before. (Obsługa przeglądarki.)

* poprzednia wersja tego postu sugerowała ustawienie rozmiaru czcionki na zero. Jednak nie działa to zgodnie z życzeniem niektórych przeglądarek, ponieważ CSS nie określa oczekiwanego zachowania , gdy rozmiar czcionki jest ustawiony na zero . Aby zapewnić zgodność między przeglądarkami, użyj małej czcionki, jak wspomniano powyżej.

 82
Author: anroesti,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-04 19:31:28

Dla lepszej obsługi przeglądarki:

Zawiń tekst, który powinien być ukryty w dodatkowym elemencie span i zastosuj klasy do tego zakresu, aby ukryć tekst, który chcesz ukryć.

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żyta powyżej pochodzi z bieżącej 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
  • brak problemów z małym tekstem jak inne małe font-size rozwiązania.
  • ukryta zawartość nie zajmuje miejsca

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

 9
Author: tinystride,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-11 16:33:09

Myślę, że nie jest to możliwe z czystym css i html. Patrząc na ten przykład http://jsbin.com/efeco4 zobaczysz, że to, co jest wewnątrz content właściwości css, jest zawinięte przez element. Więc każda manipulacja elementem wpłynie również na css content.

Więc 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 content css. Przykładowy kod może być następujący: 

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

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

 -2
Author: Sotiris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-02-06 10:48:02