Pseudo-elementy CSS ::before i ::after

Czas czytania: 2 minut

Pseudo elementy ::before i ::after to jedne z bardziej użytecznych elementów stosowanych przy budowie stron internetowych. Jak sama nazwa na to wskazuje elementy te fizycznie istnieją.

Czym są elementy ::before i ::after?

::before i ::after tworzone są one z pomocą styli CSS, nie są wiec one fizycznym elementem – nie tworzymy ich np. w HTML. Pomimo to możemy wykonywać na nich takie same operacje / działania jak w przypadku tych dodanych w HTML. Jak sama nazwa mówi ::before to pseudo-element odnoszący się do przestrzeni przed zawartością danego elementu oraz ::after bezpośrednio po niej.

Jak korzystać z ::before

Z pomocą :before możemy dodać bezpośrednio przed element różne obiekty takie jak grafiki, teksty ale również różne wyróżnienia graficzne np. podkreślenia. W tym wypadku przed oznacza, że domyślnie zawartość :before znajduje się w tym samym miejscu co elementy występujące wcześniej.

Przykład z użyciem grafiki:

W kodzie wygląda to następująco:

HTML

<div class="demo1">
<p>przykładowy tekst</p>
</div>

kod CSS dodający :before do elementu <p>

.demo1 p::before {
    content: url(https://www.aurainweb.pl/wp-content/uploads/2013/02/14946_b-e1359786837528.jpg);
}

Jak widzicie w przykładzie dodałam prze tekstem obrazek. Jednak element do, którego dodałam obrazek nie występuje w kodzie HTML. Dodaliśmy go w kodzie CSS – a przeglądarka sama wygenerowała obiekt.

Do wyświetlenia grafiki użyłam właściwości content. Z jej pomocą jednak można dodawać nie tylko grafiki, spokojnie można dodawać również np. tekst, symbole czy tło pod teksem. Warto jednak pamiętać, że obiekty w ten sposób dodane zachowują się podobnie jak tło.

W kolejnym przykładzie z pomocą :before podmieniłam wypunktowanie listy:

Dla odmiany teraz lista numerowana:

W jaki sposób używać ::after

W podobny sposób jak z :before korzystamy z elementu :after z tą różnicą, że odnosi się on do miejsca za obiektem. Czyli np. w znaczniku <p>, ale za umieszczonym w nim tekście:

przykład z obrazkiem:

HTML

<div class="demo2">
<p>przykładowy tekst</p>
</div>

CSS

.demo2 p::after {
    content: url(https://www.aurainweb.pl/wp-content/uploads/2013/02/14946_b-e1359786837528.jpg);
}

Łączenie ze sobą :before i :after

Oba elementy można stosować jednocześnie. Co może dawać naprawdę ciekawe efekty

Przykłady połączenia:

Dekorowanie nagłówka sekcji

Dodawanie na całą szerokość strony internetowej tła pod nagłówkiem. Tło to wychodzi poza obręb kontenera z treścią:

Jak pokazują powyższe przykłady :before i :after zwiększają nasze możliwości na stronach internetowych. Oferują nam całkiem spore pole do manewru i nie chodzi tylko o dekoracje tekstu.