Umiejętność korzystania z pseudo-elementów before i after może okazać się konieczna, aby pisać nowoczesny CSS i w pełni wykorzystać możliwości kaskadowych arkuszy stylów. Warto też znać funkcję 'attr’, która potrafi być swego rodzaju ułatwieniem.
Mamy taką oto listę:
<ul>
<li>Chair 1 Price:<span class="price" data-currency="$">10.99</span></li>
<li>Chair 2 Price:<span class="price" data-currency="£">10.99</span></li>
</ul>Jak się możemy domyślić, chcemy, aby przed ceną (nasz <span>) pojawił się znak symbolizujący walutę pobrany z atrybutu data-currency. Nic prostszego:
.price[data-currency]::before {
content: attr(data-currency);
}Odwołujemy się do elementów o klasie 'price’, które posiadają atrybut 'data-currency’. Korzystając z pseudo-elementu ’::before’ dopisujemy przed nimi właściwość 'content’, której wartością jest zawartość data-currency.
A gdyby tak dopisać coś po spanie? Od tego mamy pseudo-element ’::after’. Najpierw uprośćmy naszą listę:
<ul>
<li>Chair 1<span class="price" data-currency="$">10.99</span></li>
<li>Chair 2<span class="price" data-currency="£">10.99</span></li>
</ul>Przed spanem o klasie price chcemy dopisać ’ Price: ’ zaś po takim spanie (jeżeli posiada atrybut data-currency) umieścić symbol waluty:
.price::before {
content: ' Price: ';
}
.price[data-currency]::after {
content: attr(data-currency);
}Oczywiście zazwyczaj nie będziemy z tych pseudo-elementów korzystać aby jakiś tekst dodawać przed czy po elemencie. To są nasze sloty (z których before jest umownie przed elementem, zaś after po elemencie – umownie, bo możemy dowolnie manipulować ich położeniem poprzez dopisywanie kolejnego CSS), które pozwalają nam coś dodać – podkreślenie, kropkę, kwadracik, dowolny wręcz CSS.
Wydaje się mało przydatne, ale wystarczy zobaczyć kilka przykładów użycia tych pseudo-elementów (także do znalezienia na tej stronie w kategorii CSS), aby zmienić zdanie.
Musimy tylko pamiętać o jednym – każdy element musi mieć content. Nawet jeżeli nie wstawiamy żadnego tekstu, musi być przynajmniej pusty napis:
.price::before {
content: '';
}Mając to możemy dopisać dowolny CSS – podkreślenie, kropkę, kwadrat, cokolwiek, i dowolnie to wypozycjonować. Oczywiście jesteśmy ograniczeni do dwóch slotów. Zobaczmy taki element:
<h1>My heading</h1>Ma on dwa sloty – before i after. Możemy zatem nadać mu podwójne podkreślenie – jedno pod spodem, drugie nad nim. Możemy także połączyć to z hover i transform-origin tak, że po najechaniu myszką dopiero się ono pokaże – dolne od lewej, górne od prawej strony.
Gdybyśmy jednak chcieli uzyskać „sniper effect”, czyli taki celownik (4 obramowania z pewną przerwą, przypominające celownik) po hoverze, to niestety w takiej postaci nie możemy, mamy before i after, a potrzebne nam cztery elementy.
Ale to można łatwo rozwiązać:
<h1><span></span>My heading<span></span></h1>Dodajemy dwa puste spany, każdy z nich ma swoje before i after, co wystarczy na utworzenie 4 elementów, które dadzą nam efekt „celownika” wokół naszego nagłówka.
Możliwości CSS wraz z animacjami oraz pseudo-elementami są niemal nieograniczone. Będziemy je odkrywać w następnych szybkich CSSach.
