Zawartość generowana

Dane w pigułce
Zastosowanie	automatyczne generowanie treści
Dziedziczenie	nie
Wartości	ciąg znaków, counter, url, open-quote|close-quote, no-open-quote|no-close-quote, attr(x))
Wartość domyślna	brak
Przykład	p.gwiazdka:before { content: "* "; }
Uwagi
Odpowiednik w HTML	brak

Aby zdefiniować generowaną zawartość, należy wpisać w definicji stylu content : generowana zawartość

Polecenie content jest narzędziem do automatycznego generowania treści, współpracującym z pseudoelementami :before i :after. Podanie go w stylu powoduje przywołanie jakiejś treści, np. licznika, ciągu znaków czy grafiki.

W części nagłówkowej podaj styl, natomiast w ciele dokumentu odwołaj się do klasy, która spowoduje przywołanie zdefiniowanej w stylu treści.

Przykład ciągu znaków:

Styl w HEAD
p.gwiazdka:before { content: "* "; }

Zwróć uwagę na spację po gwiazdce, która pozwoli oddzielić ją od następującego po niej akapitu.

Odwołanie w ciele dokumentu:

<p class="gwiazka">Treść akapitu</p>

Rezultat:

Akapit poprzedzony gwiazdką

Przykład odwołania do pliku graficznego (Url):

Styl w HEAD
p.zielona_kropka:before { content: url(greendot.gif)}

Odwołanie w ciele dokumentu:

<p class="zielona_kropka">Treść akapitu</p>

Rezultat:

Akapit poprzedzony zieloną kropką

Odwołań przez Url do plików multimedialnych, jak np. dźwięk, przeglądarki na razie nie interpretują.

Przykład odwołania do licznika:

Styl w HEAD
p.licznik1:before { counter-increment: licznik_dziesietny; content: counter(licznik_dziesietny, decimal) }

Odwołanie w ciele dokumentu:

<p class="licznik1">Treść akapitu</p>

Rezultat:

Akapit poprzedzony licznikiem dziesiętnym (decimal)

Akapit poprzedzony licznikiem greckim (lower-greek)

Akapit poprzedzony dużym licznikiem łacińskim (upper-alpha)

Akapit poprzedzony licznikiem z wiodącym zerem (decimal-leading-zero)

Typy liczników odpowiadają markerom z listy stylów wykazów.

Przykład odwołania do cudzysłowu:

Styl w HEAD
p { quotes: "\201e" "\201d"; }
p.cudzyslow:before { content: open-quote; }
p.cudzyslow:after { content: close-quote; }

Zauważ, że definicja określa w pierwszym wierszu postać znaków cudzysłowu.

Odwołanie w ciele dokumentu:

<p class="cudzyslow">Treść akapitu</p>

Rezultat:

Akapit objęty cudzysłowem

W praktyce odwołanie do cudzysłowu można wykorzystac np. w znaczniku <blockquote>, który służy często do cytowania.

Styl w HEAD
blockquote { quotes: "\201e" "\201d"; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

Samodzielne użycie content:

Polecenenie content nie musi być używane z pseudoelementami :before i :after.
Można je wykorzystać jako samodzielne polecenie wywołujące jakąś treść, np. w HEAD można podać treść stylu:

div.sufi { content: url(../grafika/sufi.jpg) }

Za każdym razem, gdy wprowadzimy polecenie (tylko Opera):

<div class="sufi">[fotka Sufi]</div>

Na ekranie pojawi się zdefiniowany w bloku obrazek lub treść, gdy przeglądarka nie interpretuje polecenia.

Inny przykład, z użyciem tekstu (tylko Opera):

span.kato {content: " ceterum censeo Carthaginem esse delendam"}

W ciele dokumentu:
<p>Jak mawiał Kato Starszy: <span class="kato">[cytat z Katona]</span></p>

I efekt:

Jak mawiał Kato Starszy: [cytat z Katona]

Oczywiście ma to sens, gdy często przywołujemy jakiś dłuższy czy trudniejszy do zapamiętania fragment tekstu.

Interpretacja: Opera, Firefox