Pseudo-elementy ::before
i ::after
mają ogromną moc – mogą ożywić nudne selektory lub otworzyć nowe możliwości w tworzeniu prostych animacji. Wszystko dzięki temu, że pozwalają dokleić do pojedynczego selektora dodatkowe 2 – „anonimowe”.
W tym artykule, omówię krótko do czego służą pseudo-elementy ::after
i ::before
a na koniec przedstawię ciekawe efekty on hover dla buttonów, które udało mi się zrobić z ich pomocą.
Czym są pseudo-elementy?
Pseudo-elementy pozwalają zmieniać style dla danej części selektora, dla którego są stosowane – za ich pomocą moża stylować np. pierwszą literę paragrafu, pierwszą linię tekstu, kawałek zaznaczonego przez użytkowanika tekstu itp.
Oprócz pseudo-elementów mamy też pseudo-klasy – one z kolei określają stan elementu, np. :hover czy :focus.
Pseudo-elementy ::before i ::after
Dzięki ::before
i ::after
możemy dodać jakąś wybraną zawartość do strony z poziomu CSS. W tym wypadku dodawane przez nas elementy są „anonimowe” – nie istnieją w kodzie HTML.
Składnia z dwoma dwukropkami (::after
::before
) została prowadzona w 3-ciej wersji CSS, żeby odróżnić pseudo-elementy od pseudo-klas. W poprzedniej wersji, składnia miała jeden dwukropek (:after
:before
). Przeglądarki akceptują obie wersje.
Dodanie zawartości jest możliwe dzięki własności
content
pseudo-elementu. Zawartość wstawiana przez ::before
, umieszczana jest przed naszym selektorem – jako pierwsze dziecko, ::after
wstawia zawartość na koniec – jako ostatnie dziecko.
Składnia wygląda w najprostszej wersji tak (własność content
jest obowiązkowa, nawet jeśli ma zostać pusta):
selektor::after{
content: "";
}
selektor::before{
content: "";
}
Prosty przykład, pokazujący działanie, można znaleźć pod tym adresem.
Warto pamiętać o tym, że lepiej nie umieszczać tym sposobem bardzo istotnych treści a raczej poboczne/ kosmetyczne – jakieś tekstowe ozdobniki, podkreślenia, znaki specjalne i inne tego typu.
Domyślnie, wstawiana tym sposobem zawartość jest inline.
Pseudo-elementy nie działają dla wszystkich elementów – ::before
i ::after
nie zadziała między innymi dla: <img>
, <video>
, <input>
.
Wykorzystanie w animacjach
Żeby pokazać jak w ciekawy sposób można wykorzystać pseudo-elementy, które opisałam w tym artykule, przygotowałam wpis na CodePen – 6 buttonów z efektem :hover.
See the Pen Button hover effects by CroCoder (@crocoder) on CodePen.
Animacje to faktycznie fajne zastosowanie dla pseudoelementów, ale można za ich pomocą zrobić znacznie więcej. Przykładowo, jeżeli tag „a” będzie posiadał odpowiednio przygotowany pseudoelement ::before, może zwiększyć swój obszar oddziaływania na kliknięcie do pierwszego kontenera, który posiada atrybut position: relative. To bardzo przydatne w wielu motywach komercyjnych, które posiadają osobne kontenery na obiekt (np. skrót wpisu lub portfolio), ale pozwalają na linkowanie tylko tagiem „a” umieszczonym wewnątrz. Jednocześnie przy dodaniu tła oraz półprzezroczystości, możemy tym sposobem uzyskać klikalną kolumnę oraz UX-owy zabieg informujący o możliwości interakcji z obiektem. A to wszystko tylko za sprawą CSS.