Pseudo-elementy CSS ::before i ::after

Czas czytania: 2 minut

Pseudo elementy ::before::after to jedne z bardziej użytecznych elementów stosowanych przy budowie stron internetowych. Jak sama nazwa na to wskazuje elementy te fizycznie istnieją. Tworzone są one na podstawie kodu zawartego w stylach CSS. Mimo fizycznego braku możemy się do nich odwoływać. Jak sama nazwa mówi ::before to pseudo-element odnoszący się do przestrzeni przed danym elementem a ::after bezpośrednio po nim.

before i after

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 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:

przykładowy tekst

HTML

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

CSS

.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. Użyłam do tego właściwości content z jej pomocą jednak można dodawać nie tylko grafiki, ale także np. tekst, symbole czy tło pod teksem.

See the Pen RwoZWZX by Aura (@Julka85) on CodePen.dark

See the Pen counter CSS by Aura (@Julka85) on CodePen.dark

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

W podobny sposób jak z before korzystamy z elementu after czyli za

przykład z obrazkiem:

przykładowy tekst

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 :before i :after

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

Przykłady:

See the Pen Text decoration by Aura (@Julka85) on CodePen.0

See the Pen Full width color by Aura (@Julka85) on CodePen.dark

Jak pokazują powyższe przykłady mamy z pomocą tych właściwości całkiem spore pole do manewru – jeśli chodzi o dekoracje tekstu.