Zaprezentowana w specyfikacji CSS2 właściwość content bez wątpienia pretenduje do miana jednej z najbardziej zadziwiających decyzji twórców kaskadowych arkuszy stylów. Same style zostały zaprojektowane, aby oddzielić warstwę prezentacji od treści. Natomiast content aktywnie zdaje się zaprzeczać tym ustaleniom. Zadaniem tej właściwości bowiem jest dodawanie treści do elementów za pomocą arkusza stylów. Tak więc jak za pomocą przestarzałych elementów typu <font> czy <center> możemy umieszczać elementy prezentacyjne bezpośrednio w strukturze HTML, tak za pomocą content mamy możliwość umieszczania dodatkowych treści przez arkusze stylów.

Jak nie używać css'owego content?

Przykład nieodpowiedniego użycia content to m.in.:

<style>
.warning:before {
  content: "Mniej ważny komunikat";
  display: block;
}
.error:before {
  content: "Bardzo ważny komunikat";
  display: block;
}
</style>
...
<div class="warning">Nie podano numeru telefonu</div>
<div class="error">Podane hasła różnią się</div>

Powyższy kod dodaje istotne z punktu widzenia użytkownika informacje. Idealnie powinny one być zdefiniowane bezpośrednio w strukturze HTML. Dodawanie tego typu tekstu za pomocą stylów może spodować nieprzeczytanie tekstu np. przez czytniki ekranu. Również przeglądarki tekstowe, w tym pająki przeglądarek, mogą nie wyświetlić (i nie zaindeksować treści). Poniżej przykład jak stronę z css'owym content widzi przeglądarka tekstowa.

Screen z narzędzia generującego podgląd w przeglądarce tekstowej. Podobnie strony "widzi" googlebot. Dla porównania - wersja na zwykłe przeglądarki.

Praktyczne przykłady

Pojawia się więc ważne pytanie - w jakim celu coś takiego jak content zostało wprowadzone do specyfikacji. Ba, czemu zostało powielone w CSS w wersji 3?
Osobiście postarałam się zebrać kilka przykładów, które mam nadzieję pozwolą zobrazować możliwe użycie tej właściwości.

Tooltipy

Pierwszy przykład pokazuje jak w prosty sposób utworzyć ostylowane tooltipy. Wykorzystałam w tym celu nowe atrybuty języka HTML 5.
Prawdą jest, że istnieją już sposoby dodawania podpowiedzi - natywnym jest atrybut title. Jest on jednak niestylowalny, nie można nadać mu dokładnie takiego wyglądu, na jakim nam zależy. Istnieją oczywiście JavaScriptowe odpowiedniki, również jak najbardziej można dodać takie tooltipy dzięki innym, lepiej indeksowanym przez wyszukiwarki stylom. Jednakże cała treść jest tutaj dodana za pomocą HTML'a - content tylko przenosi zawartość z atrybutu HTML do stworzonego przez siebie "pseudoelementu".

p span[data-comment]:after {
   /* dzięki tej składni możliwe jest przepisanie
      wartości atrybutu do pseudoelementu :after */
  content: attr(data-comment);
  /* Następne linie to ostylowanie utworzonego pseudoelementu */
  /* Aby tooltip nie wyświetlał się tam gdzie nie trzeba
     następuje jego ukrycie */
  display: none;
  /* Pozycjonujemy pseudoelement absolutnie
     względem elementu  z atrybutem data-comment */
  position: absolute;
  padding: 2px 5px;
  border: solid 1px red;
  background: darkred;
  color: #fff;
}
p span[data-comment]:hover:after {
  display: block; /* Po najechaniu odkrywamy pseudoelement */
  width: 150px; 
}

Wymagane pola

Widywałam już projekty stron, w których wymagane pola formularza były wyróżniane kolorem, zamiast popularnej i szeroko przyjętej gwiazdki. Samą gwiazdkę trudno uznać za niezbędny element o niezwykle ważnej wadze. Równie trudno za taki element uznać dwukropek występujący po każdej z etykiet formularza. W momencie, gdy zmieni się koncepcja i wymagane pola formularza powinny być określane przez gwiazdki - zamiast zmieniać HTML możemy użyć drobnego hacka css. Efekt wizualny będzie ten sam, natomiast rozwiązanie jest zdecydowanie dużo prostsze.

label {
  float: left;
}
label:after {
  content: ":"; /* Dodanie dwukropka po etykiecie formularza */
}
/* Następny selektor wybiera tylko elementy
    formularza z atrybutem required (CSS3) */
/* Nieco magii: E ~ F oznacza wybór takiego elementu F,
    którego bratem (niekoniecznie bezpośrednim)
     jest element E */
/* W naszym przypadku będzie to wybór elementu label
    (i utworzenie pseudoelementu :after)
     będącego bratem elementu required formularza */
input[required] ~ label:after,
select[required] ~ label:after {
  content: ": *"; /* Dodanie dwukropka i gwiazdki */
  color: red; /* Wyróżnienie kolorem */
}

Spoilery

Content można wykorzystać np. również przy "zabezpieczaniu" spoilerów. I to rozwiązanie ma pewne minusy - elementy pokazują się po najechaniu, nie po kliknięciu jak większość tego typu mechanizmów, więc istnieje możliwość przypadkowego podejrzenia (użytkownicy z czytnikami ekranu w ogóle naszego spoilera nie będą mieć zakrytego). Plusem natomiast jest łatwość implementacji i brak JavyScript.

p span.spoiler {
  display: block;
  position: relative; /* Aby można było pozycjonować absolutnie do tego elementu */
  margin: 3px 0;
}
p span.spoiler:after {
  /* Dodanie tekstu o spoilerze, sam tekst jest nieistotny,
     można więc użyć content */
  content: "Spoiler...";
  /* Przykrycie całego elementu .spoiler */
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /* Elementy dekoracyjne */
  text-align: center;
  background: #fff;
  color: red;
  border: solid 1px black;
}
p span.spoiler:hover:after {
  display: none; /* Po najechaniu zaślepka znika */
}

Podsumowanie

Jak zawsze dla wyżej wymienionych przykładów da się znaleźć inne, w tym przypadku zapewne nawet lepsze rozwiązania. Zawsze przy implementowaniu pewnych elementów należy rozważyć "za" i "przeciw" postępowania, określić potencjalne plusy i minusy. Niewątpliwą zaletą korzystania z właściwości content jest szybkość wdrażania zmian, natomiast największym niebezpieczeństwem - nadużywanie możliwości i mieszanie części wizualnej z treścią.
Dodatkowe użycie właściwości content można bez problemu znaleźć w sieci. Natomiast to, co dodatkowo mogę polecić od siebie, to m.in. ciekawy efekt pokazywania adresów linków na stronie drukowania (oraz inne zastosowania dostępne w artykule).