Pseudo-elementy CSS :before i :after

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



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ż

Tabele w HTML Tabele są jednym z podstawowych znaczników w języku HTML. Przed wejściem stron RWD tabele HTML były najczęściej spotykanym obiektem na stronie. Chyba ...
Element HTML z pionowym tekstem Tym razem pokaże w jaki sposób uzyskać efekt pionowo pisanego tekstu w elemencie HTML. Jak uzyskać efekt pionowego tekstu Na początek rozdziela...
Trójkąty za pomocą CSS Trójkąty na stronie przeważnie umieszcza się w formie ilustracji, jest to najpopularniejsza metoda jednak nie jedyna. Trójkąty można również stworz...
Lista wypunktowana – HTML/CSS Jednym z najczęściej występujących na stronach internetowych elementów jest wypunktowana lista. Występuje ona praktycznie na każdej stronie, choć nie ...

Dodaj komentarz

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