Ostatnia aktualizacja: 

Jak działają Pseudoelementy

O co chodzi z ::after i ::before? Dlaczego nie mogę stworzyć ich w HTML? Jeśli zadawałeś sobie pytania na te i podobne tematy w kontekście pseudoelementów CSS, ten materiał jest dla Ciebie!

CSS
13m 56s
24.200+ wyświetleń
678+ pozytywnych reakcji

Pseudoelementy CSS: after oraz before

Pseudoelementy to taki specifyczny rodzaj elementów, które definiujemy z poziomu CSS a nie HTML. Niektóre z nich pojawią się one w narzędziach developerskich przeglądarki, jednak nie będziemy w stanie dostać się do nich z poziomu JavaScript. O co tutaj chodzi?

Transkrypt wideo

Cześć, w tym wideo opowiem wam czym są i jak działają pseudoelementy.

[ intro kodu.je ]

Pseudoelementy to taki specyficzny rodzaj elementów,
które nie są widoczne w waszym kodzie źródłowym HTML

W tym wideo omówimy dwa najpopularniejsze z nich,
czyli ::after i ::before.

Są one stworzone w CSSie, czyli nie możecie stworzyć ich z poziomu pliku o rozszerzeniu HTML.

W związku z tym otwórzmy zalinkowany plik styles.css i stwórzmy nasz pierwszy pseudoelement.

Na początku musimy wskazać znacznik, na którym chcemy dodać nasz ::after bądź ::before.

My wykorzystamy do tego blockquote, czyli te trzy cytaty.
Pseudoelement deklarujecie za pomocą dwóch dwukropków,
używanie tej notacji pozwala łatwiej rozróżnić je od pseudoklas,
takich jak :hover, :active czy :visited.

Na znacznikach blockquote stworzymy więc ::before,
no i możemy zacząć już deklarować jak on ma wyglądać.

Pierwszą i najważniejszą rzeczą, o której powinniście pamiętać jest to,
że pseudoelementy muszą mieć swoją treść, aby pokazać się na naszej stronie.

Z poziomu CSSa możecie ustalać treść pseudoelementów,
za pomocą właściwości content, więc jeśli wpiszemy sobie content i nadamy wartość ::before, no to jak zauważyliście, po prawej stronie w podglądzie do każdego elementu blockquote, został dodany na początku tekst before.

Możecie tutaj wpisać dowolną wartość tekstową.
Na takiej samej zasadzie działa ::after, więc skopiujemy sobie ten selektor
i zmienimy nazwę z ::before na ::after.

Jak widzicie na końcu naszego blockquote'a pojawił się napis AFTER.
Zobaczmy jak wygląda to w inspektorze www.
Jak widzicie wewnątrz naszych znaczników blockquote,
pojawiły się takie oto elementy ::before i ::after.

Pseudoelement ::before pojawi się zawsze jako pierwszy w znaczniku,
na którym został dodany i tak samo pseudoelement ::after,
zawsze będzie ostatnim elementem wewnątrz tego znacznika.

Jak widzicie te elementy  mają swoje własne reguły stylowania w CSSie
i możecie użyć ::before'a i ::aftera w każdym elemencie posiadającym ciało, czyli np. nie dodacie pseudoelementu na znaczniku img.

Do czego możecie wykorzystać ::before i ::after?
No najprostszym użyciem tych pseudoelementów, byłoby np. dodanie do naszych cytatów cudzysłowiów czyli na pseudoelemencie ::before, ustawiamy otwierający cudzysłów i na pseudoelemencie ::after ustawiamy zamykający cudzysłów, i jak widzicie przez to, że dodaliśmy te cudzysłowy jako ::before i ::after, to wszystkie nasze blockquote'y automatycznie dostały te cudzysłowy.

W HTMLu musielibyście to oczywiście ręcznie dodawać do każdego znacznika, bądź generować te teksty przy pomocy JavaScriptu czy na back-endzie.

Kolejna ważna cecha pseudoelementów, to to, że nie są widoczne dla czytników ekranowych. Co to oznacza?
::before i ::after powinny mieć charakter stricte dekoracyjny,
czyli nie powinniście umieszczać tam informacji istotnych dla użytkownika waszej strony www,
takich jak np. opis obrazka w znaczniku figure, czy dopełnienie treści nagłówka.

Wasza strona powinna być tak samo czytelna i przekazywać dokładnie taką samą informację, co w przypadku gdyby tych pseudoelementów po prostu nie było.
No skoro wiemy już, że pseudoelementy ::after i ::before możemy wykorzystywać jako swoistą dekorację, dodajmy wizualny separator dla naszego nagłówka "Pseudo-elementy".

No więc na naszym .video-title (ponieważ taką właśnie klasę ma ten nagłówek), stworzymy sobie pseudoelement ::after, no i tym razem ustawimy mu content na pusty, ponieważ tak naprawdę nie chcielibyśmy aby ta nasza linia miała w sobie jakiekolwiek litery, jeśli ustawicie na tym elemencie np. border na 1px o kolorze białym, no to jak widzicie, faktycznie na końcu naszego nagłówka, pojawiła się kreska.

Jeśli spróbowalibyście w tym momencie np. ustawić width na 100%,
no to to niestety nie zadziała ::before i ::after domyślnie są blokami liniowymi, czyli są traktowane jak tekst.

Jeśli chcielibyście ustawić szerokość czy wysokość danego elementu,
powinniście zmienić wyświetlanie np. na block.

W tym momencie jak widzicie, nasz ::after rozszerzył się na całą szerokość kontenera, a jako, że jest to blok, to tak naprawdę tego width: 100% nawet nie musielibyśmy ustawiać, chyba że chcielibyśmy aby np. był węższy, to możemy ustawić np. 100px i jak widzicie ten element ma już 100px, możemy mu wtedy oczywiście nadać też wysokość,
no i tak naprawdę stylować go jak każdy inny element w HTMLu.

Jeszcze jedną ważną rzeczą (w tym konkretnym przypadku) jest to,
że jeżeli usuniecie sobie content, to nasz element zniknie.

To znaczy, że zawsze używając pseudoelementów ::after i ::before,
musicie zdefiniować właściwość content, nawet jeżeli ma być ona pusta.
Może troszkę poprawmy ten border, ustawimy mu kolor na troszkę przezroczysty. No dobrze, co dalej?

Obok naszego nagłówka CYTATY wstawimy dwie poziome linie,
które będą wycentrowane w pionie i zajmowały całą dostępną szerokość
No więc ustawimy na naszym .quote-title (czyli na tym elemencie),
pseudoelementy ::before oraz ::after i tak naprawdę ten selektor,
będzie miał dużo punktów wspólnych z tym,
co już tutaj zdefiniowaliśmy przy tworzeniu tego separatora dla .video-title, więc może wydzielimy sobie te style w ten sposób
i w linijce 19, będziemy tworzyli reguły specyficzne dla tego ::before'a i ::aftera na .quote-title.

Jak widzicie - nasz nagłówek CYTATY otrzymał w tym momencie dwie poziome linie - na górze i na dole. No dzieje się tak, ponieważ jak wiemy,
::before pojawia się na początku naszego znacznika,
jako, że jest blokiem, to zajmuje całą dostępną przestrzeń
i treść cytatu przeszła do następnego wiersza
i oczywiście ::after jest na końcu i również jest tak samo rozciągnięty.

Moglibyśmy próbować definiować szerokość tych elementów,
jak widzimy one się skracają, ale jako, że to jest dalej blok,
to te elementy nie są w jednej linii z cytatami,
więc jeśli chcielibyśmy ustawić i  szerokość, i powiedzieć,
że mają zachowywać się jak elementy liniowe,
możemy do tego użyć wartości inline-block,
na właściwości display, my zrobimy to sobie troszkę inaczej,
użyjemy do tego flexa, więc wyrzućmy sobie ten inline-block,
wyrzućmy szerokość, no i na naszym .quote-title ustawmy display na flex.

Teraz gdy ustawimy flex-grow na 1,
to powiemy elementom ::after i ::before,
aby zajęły całą dostępną przestrzeń, no ale domyślnie niestety flex nam ustawi align-items na stretch, więc jeśli nie chcielibyśmy aby te elementy były prostokątami, no to musimy ustawić jeszcze na quote-title align-items: center.

Jak widzicie mamy już dwie poziome linie wyśrodkowane względem kontenera, moglibyśmy dodać jeszcze troszke marginesu, załóżmy na 0 5px. Więc jak widzicie - stworzenie takiego efektu dla nagłówka, nie było takie trudne. Kolejnym przykładem użycia pseudoelementów jest zrobienie takiego oto bordera.

Więc w naszym głównym divie o klasie .pseudo-elements,
ustawimy na stałe wysokość 300px oraz szerokość 270px,
ustawimy box-sizing na border-box, jeśli nie wiecie jak działa box-sizing: border-box, koniecznie kliknijcie w kartę widoczną w prawym górnym rogu ekranu, następnie ustawimy padding na 10px oraz obramowanie na 10px w kolorze zielonym z palety barw koduje.

Następnie zdefiniujmy nasze pseudoelementy,
więc skopiujemy sobie ten selektor i stworzymy .pseudo-elements:: before, oczywiście standardowo dodamy .pseudo-elements:: before i pseudo-elements:: after, do tego selektora tak aby wydzielić ten content i display, no i żeby nie komplikować już tego naszego arkusza stylów,
no to tutaj ustawimy sobie border na none.
Teraz jeśli ustawimy wysokość na 10px, czyli szerokość naszego obramowania z każdej strony, oraz na szerokość taką,
jaka byłaby między lewą a prawą stroną naszego obramowania, załóżmy na 200px, to jeśli ustawimy sobie jakiś background, powiedzmy na na razie biały z palety barw koduje, no to widzimy gdzie ten element się faktycznie znajduje na naszej stronie.

Więc my chcielibyśmy przesunąć stąd - tutaj.
Aby to zrobić, wykorzystamy pozycjonowanie absolutne,
jeśli nie wiecie jak działają poszczególne wartości position -
koniecznie kliknijcie w kartę widoczną w prawym górnym rogu ekranu,
gdzie dogłębnie tłumaczę tę konkretną właściwość.

No więc na rodzicu, czyli na  .pseudo-elements
ustawimy position: relative, no i teraz na pseudo.elements:: before,
ustawimy position: absolute.

Ten nasz ::before jest teraz wypozycjonowany absolutnie względem swojego rodzica, więc jeśli ustawimy mu top na 0,
to jak widzicie, on pojawił się na samej górze swojego rodzica,
natomiast nam zależy na tym, aby ten pseudoelement znalazł się na naszym borderze.

Wiemy, że szerokość naszego obramowania jest to 10px,
więc możemy sobie cofnąć ten top o jeszcze 10px.

No jak widzicie, to nam się tutaj ładnie wyrównało,
jeśli zmienimy sobie kolor na fioletowy z palety barw kodu.je,
no to widzicie - otrzymaliśmy już ten efekt przycięcia naszego borderu,
pozostało tylko wypozycjonować go w poziomie.

Jak możemy to zrobić?
Wystarczy, że ustawicie sobie left na 0,
oraz right na 0 i tak naprawdę mówicie przeglądarce,
że chcecie by był on wypozycjonowany jak najbardziej od prawej
i jak najbardziej od lewej, w tym samym czasie (czego oczywiście przeglądarka nie może zrobić).

Natomiast jeśli nadacie jeszcze margines ustawiony na auto,
no to wtedy już przeglądarka zrozumie o co chodzi i wycentruje wam ten element w tej osi.

Jeśli ustawilibyście sobie top na 0 i bottom na 0,
no to również ten element zostanie wycentrowany w pionie.

Aby ta właściwość CSSa zadziałała, musicie zdefiniować szerokość danego elementu.
Jeśli centrowalibyście to w pionie, no to musicie wtedy też pamiętać o ustawieniu wysokości

No więc wiemy już, jak możemy uzyskać ten efekt przyciętych borderów,
natomiast mamy tylko dwa pseudoelementy,
ponieważ na ::beforze nie możecie stworzyć::before'a, czy ::aftera,
ponieważ jak już powiedzieliśmy, ::before i ::after, mogą występować tylko w znacznikach, które posiadają ciało, więc mamy dwa pseudoelementy, a 4 strony obramowania, które chcemy obsłużyć.

Więc możecie to zrobić wykorzystując cienie,
jeśli ustawicie sobie box-shadow, gdzie pierwszym parametrem będzie odstęp z lewej względem elementu, na którym dajecie cień, drugi jest odstęp w pionie, no więc jako, że nasz znacznik pseudo-elements ma wysokość 300px, a my tutaj odejmujemy 10, aby przesunąć tego naszego ::before'a na obramowanie, no to dajemy przesunięcie w osi pionowej 290px.

Trzeci parametr jest to blur, więc zostawimy go na 0,
no i ostatni parametr to jest kolor jaki ten cień ma mieć,
więc my chcemy mieć cień o kolorze takim samym jak nasz background
i jak widzicie, przy pomocy jednego pseudoelementu, przysłoniliśmy dwie strony obramowania,
więc analogicznie rozwiązujemy ten problem dla bocznych obramowań.

Skopiujemy sobie ten selektor, ustawimy, że chcemy aby nasz ::after miał wysokość załóżmy 200px, szerokość ustawimy na 10px, ponieważ to jest szerokość naszego obramowania,
no i tutaj zamiast top ustawiać na -10px,
to left ustawiamy na -10px i centrujemy to w pionie,
czyli top na 0, bottom na 0 oraz margin: auto.

Jak widzimy - lewa strona naszego obramowania również jest już przycięta, no może tutaj powiększymy sobie troszkę wysokość, żeby to było bardziej kwadratowe, powiedzmy, że jest okej.

No i ustawiamy box-shadow  - nie z przesunięciem w pionie,
tylko z przesunięciem w poziomie, więc tutaj wstawiamy 0,
no i tutaj musimy sobie policzyć, nasze pseudo-elements ma 270px szerokości, no i my ponownie odejmujemy 10,
więc tutaj wpisujemy 260px.

I jak widzicie, bez brudzenia naszego markupu HTML,
stworzyliśmy bardzo ciekawie wyglądający fragment strony.

Jest to o wiele lepsze rozwiązanie, niż tworzenie divów, czy wstawianie obrazków, które mają tylko sprawić, że ten fragment będzie ładniejszy
Pamiętajcie też, że usuwając nasze wszystkie deklaracje stylów,
ta strona jest tak samo czytelna, jeśli chodzi o treść.

Jeśli chcecie poznać więcej ciekawych przykładów użycia pseudoelementów, cieni i pozycjonowania, koniecznie sprawdźcie nasze starsze materiały, gdzie rysuję różne obiekty, obrazki, używając do tego tylko jednego diva oraz reguł CSSowych.

Jeśli jeszcze nie widzieliście naszego materiału o nodzie,
koniecznie kliknijcie w ikonkę widoczną w lewym rogu ekranu,
aby dowiedzieć się więcej (jest za darmo)

[ blooper ]

10 kwietnia 2022

Komentarz od autora

Pseudoelementy to scyzoryk szwajcarski każdego Frontend developera. Dzięki nim możemy utrzymywać semantyczny i czytelny markup (czyli nasz kod HTML), w sytuacjach gdy nasz design jest nieco bardziej wymagający i nie chcemy posługiwać się po prostu obrazkami.

::before i ::after to oczywiście nie jedyne pseudoelementy które mamy do dyspozycji w CSS. Jeśli chcielibyście poznać nowe, potężne pseudoelementy i pseudoklasy - koniecznie dajcie o tym znać w komentarzach na YT pod tym wideo.

Wsparcie PSEUDOELEMENTÓW według CanIUSE

Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)

Data on support for the mdn-css__properties__content feature across the major browsers

Zobacz kod źródłowy

Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :) 

Poznaj Wojtka

Cześć! Nazywam się Wojciech Połowniak i jestem programistą Fullstack z zacięciem do tworzenia jakościowych materiałów szkoleniowych.

Uwielbiam automatyzację, VR oraz interaktywne sposoby przekazywania wiedzy. Tematy takie jak UX, dostępność czy devops również nie są mi obce.

Jestem też organizatorem meet.js oraz Techspeakerem pod banderą Mozilli... A to jeszcze nie wszystko.

Chcesz więcej?

Nie ma sprawy! Koduje to długie godziny darmowej treści dostępnej na wyciągnięcie ręki.

Newsletter

Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.

Najczęściej zadawane pytania

Jaka tematyka jest poruszana na Koduje?
expand_more
Mówimy o HTML, CSS i JavaScript - zarówno na backendzie, jak i frontendzie. Tematyka taka jak Devops, architektura i infrastruktura oprogramowania również pojawią się na kanale!
Czy mogę zaproponować temat kolejnych wideo?
expand_more
Oczywiście, że tak! Najlepiej sugerować materiały w sekcji komentarzy na YouTube 
Jak to możliwe, że Koduje jest darmowe? 
expand_more
Moją pasją jest dzielenie się wiedzą w sposób zrozumiały i klarowny, jednocześnie interaktwny i angażujący. Tworząc materiały, utrwalam też własną wiedzę. Wierzę, że za to widzowie nie powinni płacić
W sieci można znaleźć strony przypominające do koduje.pl, o co chodzi?
expand_more
Niestety, na przełomie lat wiele osób próbowało podszyć się pod Koduje i wykorzystać nasze materiały do promocji własnych kanałów dystrybucyjnych.  Jeśli masz wątpliwości, czy dana strona współpracuje z Koduje - daj nam o tym znać. Nie pochwalamy piractwa, plagiatu ani szarej strefy prawa autorskiego.
Czy prowadzicie szkolenia indywidualne?
expand_more
W chwili obecnej, niestety nie. Na przełomie lat prowadziłem kursantów przez ich przygodę z programowaniem, z czego każdy otrzymał pracę jako programista. Jeśli jesteś zainteresowany lekcjami indywidualnymi, zapraszam do kontaktu mailowego.
Czy oferujecie płatne kursy?
expand_more
W przyszłości nie wykluczamy możliwości tworzenia dedykowanych kursów o danych zagadnieniach. Zapisz się na nasz newsletter, aby być na bieżąco z naszymi najnowszymi płatnymi materiałami.
Jak mogę się z wami skontaktować?
expand_more
Czytamy komentarze na YouTube! Śmiało możesz zadać pytanie na dowolny temat pod którymkolwiek z naszych wideo. Poza tym możesz skontaktować się z nami mailowo bądź poprzez fanpage na Facebooku
Obecnym właścicielem marki jest Wojciech Połowniak. Zobacz zakładkę o nas!