Od długiego już czasu CSS oferuje funkcjonalność noszącą nazwę pseudo-elementy. Niestety w czasach gdy na desktopach królował IE, a urządzenia mobilne kojarzyły się głównie z Nokią, pseudo-elementy nie miały racji bytu ze względu na niewielki odsetek użytkowników, którzy zauważyliby ich obecność. Od tamtego czasu minęło dobrych kilka lat, udział IE6 oraz IE7 w rynku mocno się skurczył, Microsoft wydał dobrą przeglądarkę IE9 i pracuje nad IE10, a urządzenia mobilne (wyposażone w nowoczesne przeglądarki) coraz częściej wykorzystywane są do przeglądania stron. Mając tak przyjazny ekosystem, możemy bez obaw stosować pseudo-elementy, z których najciekawszymi niewątpliwie są :before oraz :after.

Co w nich takiego wyjątkowego? Dzięki nim możemy do dowolnego elementu na stronie dodać dwa elementy potomne występujące bezpośrednio przed i po treści znajdującej się we wskazanym elemencie. W ten sposób unikniemy dziesiątek pomocniczych div-ów i span-ów zaśmiecających nasz kod. Zanim przejdziemy do kodu, warto dowiedzieć się gdzie wspomniane pseudo-elementy mogą być pomocne.

  1. Pojemniki na niewielkie grafiki występujące np. przy linkach (pobierz w wersji PDF + ikonka). Dodanie pseudo-elementu pozwala usunąć zbędny element, w którym osadzona jest grafika (przy założeniu, że korzystamy ze sprite’ów).
  2. Nadanie dodatkowego obramowania wokół jakiegoś elementu.
  3. Dodanie “fikuśnych” cudzysłowów do cytowanego tekstu.
  4. Możliwość utworzenia wielowarstwowego tła.
  5. Możliwość tworzenia prostych grafik tylko przy pomocy CSS.

Nie są to oczywiście wszystkie możliwe zastosowania :before i :after. Jestem pewien, że moglibyście po chwili zastanowienia podać kilka kolejnych.

Przejdźmy do kodu. Najprostsze zastosowanie :before i :after sprowadza się do wskazania treści, jaka pojawi się przed i po wskazanym elemencie.

<div id="element">
    Lorem ipsum
</div>
#element:before {
    content: '"';
}

#element:after {
    content: '"';
}

W ten oto prosty sposób dodaliśmy do wskazanego elementu cudzysłów otwierający oraz zamykający. O wiele lepszym pomysłem jest dodanie tych znaków w treści, jednak powyższy przykład miał jedynie na celu zaprezentowanie sposobu działania.

Ważne jest aby wiedzieć, iż pseudo-elementy, są – jak ich nazwa wskazuje – pseudo elementami, elementami oszukanymi, których próżno szukać w drzewie DOM. Elementy te nie są widoczne w źródle strony. Doskonale to widać (a właściwie nie widać) w Firebugu, który nie jest nawet w stanie wykryć, że dany element wykorzystuje pseudo-elementy. O wiele lepiej radzi sobie z tym Chrome oraz IE9 i narzędzia deweloperskie wbudowane w te przeglądarki.

Kolejną ważną informacją jaką należy zapamiętać jest to, że pseudo-elementy :before i :after nie otaczają wskazanego elementu, lecz w nim się zawierają, otaczając jego zawartość. Doskonale zobrazuje to kolejny przykład.

#element {
    border: 1px solid red;
    padding: 20px;
}

#element:before {
    content: 'przed';
    border: 1px solid red;
    padding: 10px;
}

#element:after {
    content: 'po';
    border: 1px solid red;
    padding: 10px;
}

W efekcie uzyskamy coś takiego.

before_after

Ostatnią niezbędną do pracy z :before i :after informacją jest to, iż oba pseudo-elementy zachowują się jak elementy inline umieszczone przed i po treści. Oznacza to, że w przypadku zmiany ich wyświetlania na blokowe, treść “wyląduje” między nimi ale w pionie. Co więcej, blokowy pseudo-element spowoduje rozciągnięcie elementu, do którego jest dodany.

Skoro wiemy już jak korzystać z :before i :after, warto sprawdzić ich zastosowanie w praktyce. Zaczniemy od czegoś prostego, czyli osadzenia ikonki przed jakimś tekstem, np. linkiem.

<a href="#" class="download">
    Pobierz w wersji PDF
</a>
.download:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    float: left;
    background: url(sprite.png) -100px -25px no-repeat;
}

Zwróćcie uwagę na właściwość content. Aby pseudo-elementy :before i :after były widoczne na stronie, musimy zdefiniować tą właściwość. Ponieważ nie chcemy dodawać tekstu, wartością właściwości content jest pusty ciąg.

Jeśli nie korzystamy ze sprite’ów, dodatkową grafikę możemy dodać w dużo prostszy sposób.

.download:before {
    content: url(ikona.png);
}

Pora zrobić coś ciekawszego. Poniższy kod przy pomocy pseudo-elementów :before oraz :after tworzy strzałkę (tylko w CSS).

<div id="element"></div>
#element {
    background: #dbdbdb;
    width: 50px;
    height: 20px;
    position: relative;
}

#element:before {
    content: '';
    display: block;
    border-bottom:  20px solid #dbdbdb;
    border-right: 20px solid transparent;
    position: absolute;
    right: -20px;
    top: -10px;
}

#element:after {
    content: '';
    display: block;
    border-top:  20px solid #dbdbdb;
    border-right: 20px solid transparent;
    position: absolute;
    right: -20px;
    top: 10px;
}

Jak widać stosowanie pseudo-elementów :before i :after niczym się nie różni od standardowych elementów. Możemy dowolnie zmieniać ich położenie, rozmiar oraz zawartość, wzbogacając tym samym naszą aplikację o tzw. eye-candy. A jeśli trafimy na użytkownika, którego przeglądarka nie obsługuje pseudo-elementów :before i :after, tragedii nie będzie, ponieważ treść zostanie poprawnie wyświetlona, a jedyne czego będzie brakować, to elementy ozdobne.

Na koniec pozostawię was z dobrą radą. Nie przesadzajcie z opisanymi wyżej pseudo-elementami. Debugowanie oraz modyfikowanie aplikacji, która z nich korzysta, do najprzyjemniejszych zajęć nie należy, zwłaszcza, że Firebug (najpopularniejsze narzędzie web developerów) w ogóle sobie z nimi nie radzi.