Pseudoelement CSS ::before dodaje przed wybranym elementem wirtualny element śródliniowy, którego treścią jest wartość własności content. Element dodany przez pseudoelement ::before jest pierwszym dzieckiem wybranego elementu.
Pseudoelement ten jest używany do różnych celów związanych z wstawianiem treści przed elementami. Między innymi w połączeniu z pseudoelementem ::after może być używany do zdefiniowania cudzysłowów dla elementu q lub blockquote.
Przykład użycia ::before
Powiedzmy, że wstawiliśmy na stronę dłuższy cytat, który ujęliśmy w element blockquote, np.:
<blockquote>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</blockquote>Domyślnie przeglądarka nie doda do niego znaków cudzysłowu, ale możemy to zmienić za pomocą pseudoelementów ::before i ::after, np.:
<style>
blockquote::before {content: "„";}
blockquote::after {content: "”.";}
</style>
…
<blockquote>Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</blockquote>Teraz nasz cytat w oknie przeglądarki wygląda tak:
Jak widać, treść cytatu blokowego została poprawnie ujęta w cudzysłów.
Składnia ::after
Składnia pseudoelementu ::after:
::before {
content "...";
...
}