Przedstawiono kod HTML akapitu. Jak należy zdefiniować styl, aby przed treścią akapitu został wstawiony znak » ze spacją?
<p>
Mimozami jesień się zaczyna,<br>
Złotawa, krucha i miła.<br>
To ty, to ty jesteś ta dziewczyna,<br>
Która do mnie na ulicę wychodziła.
</p>A. .before { content: "» "; }
B. #before { content: "» "; }
C. p.before { content: "» "; }
D. p::before { content: "» "; }
Styl p::before { content: "» "; } jest właściwy, ponieważ używa pseudoelementu ::before dla każdego elementu p. Pseudoelement ::before tworzy w CSS wirtualny fragment zawartości umieszczany tuż przed właściwą treścią wybranego elementu. Właściwość content: "» "; określa tekst wstawiany przez ten pseudoelement - znak » oraz spację, dzięki czemu znak nie przylega do pierwszej litery akapitu. Reguła do zapamiętania: selector::before { content: "tekst"; } działa tylko dla pseudoelementu, nie dla zwykłego selektora klasy ani identyfikatora. W praktyce ::before stosuje się do ozdobników, ikon tekstowych, punktorów lub etykiet dodawanych bez modyfikowania kodu HTML. Typowa pułapka: samo content nie działa na zwykłym elemencie bez ::before albo ::after.
W tym zadaniu trzeba odróżnić selektor elementu od selektora identyfikatora i klasy. #before { content: "» "; } oznacza element o identyfikatorze id="before". Byłoby trafne tylko wtedy, gdy w kodzie HTML istniał element z takim id, ale nie tworzy pseudoelementu przed akapitem. .before { content: "» "; } dotyczy elementów z klasą class="before"; w podanym akapicie nie ma takiej klasy, a właściwość content użyta bez ::before lub ::after nie wstawi tekstu przed treścią. p.before { content: "» "; } wybiera akapit p mający klasę before, czyli np. p class="before", więc również nie pasuje do podanego HTML i nadal nie używa pseudoelementu. Poprawny zapis to p::before { content: "» "; }, ponieważ ::before dodaje wirtualną zawartość przed treścią każdego akapitu. Typowy błąd myślowy polega na potraktowaniu słowa before jak nazwy klasy lub identyfikatora, zamiast jak pseudoelementu CSS.