Pseudo-elementy ::after i ::before w animacjach on-hover

Animacje on-hover dla buttonów

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.

#Wskazówka! #CCdr

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.