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?
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 ]
Nie ma czego się obawiać, to jedna z podstawowych właściwości współczesnej sieci :)
Nie mam nic do ukrycia! Eksperymentuj z moimi przykładami :)
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.
Na wyciągnięcie ręki. Za darmo, na YouTube
W tym wideo tworzymy animowaną kostkę 3D, stworzoną w samym CSS.
SVG to świetny format grafik wektorowych. Zobacz co się stanie, gdy dodamy animacje!
Jedna prosta właściwość która potrafi zmienić życie front-end developera.
W tym wideo dowiesz się jak wykorzystać zaawansowane selektory CSS aby stworzyć dostępny system oceny gwiazdkami.
Świetny sposób na prezentacje dodatkowych informacji o danym bloku - najedź myszką i zobacz co jest po drugiej stronie!
W tym wideo przedstawię Ci najważniejsze aspekty właściwości position.
Jeśli chcesz być na bieżąco z najnowszymi inicjatywami od twórców koduje? Zapisz się na newsletter - nie spamujemy!
W przyszłości, możemy udostępnić Ci informacje o dodatkowych kursach naszego autorstwa.