Pseudo-elementy CSS :before i :after

Kategoria wpisu Kurs CSS, Kursy, PHP, HTML, CSS Tagi: , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Reading Time: 2 minutes

Pseudo elementy :before i :after to jedne z bardziej użytecznych elementów, które jak sama nazwa mówi tak naprawdę nie istnieją. Mimo to 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

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:

przykładowy tekst

HTML

CSS

::after

W podobny sposób korzystamy z after

przykład:

przykładowy tekst

HTML

CSS

Łączenie :before i :after

Oba elementy można oczywiście stosować jednocześnie.

Przykłady:

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

Kod HTML przykładów:

Kod CSS przykładów:

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.

 

Przeczytaj również

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *