Mówią, że kluczem do uwiarygodnienia treści w oczach czytelnika jest zasada "content is king". Aby przyciągnąć czytelników należy zadbać o content. Skoro tak, to dziś zajmiemy się właśnie właściwością content. Zadbajmy o nią!
Królewskie wł(aściw)ości.
Właściwość content używamy dla pseudoelementów :before oraz :after. Może ona przyjąć następujące (interesujące nas) wartości:
- ciąg znaków
- wartość atrybutu data-*
- wartość licznika
- url (może być obrazkiem!)
Co ciekawe wszystkie powyższe można łaczyć ze sobą, więc treść pseudoelementu może być jednocześnie łańcuchem znaków złożonym z pierwszych trzech wartości oraz obrazka.
Król jest nagi.
Nie możemy jednak nadać tej właściwości wartości ze zmiennej css. Czyli coś takiego:
<div style="--ilosc:45"></div>
+
div:before {
content: var(--ilosc);
}
nie zadziała.
Pomyślmy, której z tych właściwości możemy użyć, aby podstawić wartość zmiennej. Url? Na pewno nie. Zwykły ciąg znaków? Odpada. Atrybut data-*? Gdzie tam.
Niech żyje licznik!
Pozostaje kwestia użycia licznika. Możemy jako wartość dla content podstawić wartość licznika. Możemy też wartość licznika zainicjować wartością zmiennej CSS. Hmm... myślisz o tym samym co ja?
div {
counter-reset: licznik var(--ilosc);
}
div:before {
content: counter(licznik);
}
Gdybyś chciał podstawić zmienną CSS np. jako wartość obrotu (właściwość transform) i jednocześnie wyświetlić aktualną wartość, to możesz z powodzeniem używać tej metody. Zerknij (klikaj na kwadrat):
Być królem to idiotyczne, liczy się tylko zbudowanie królestwa - André Malraux
Przydatne linki:
O licznikach w CSS
Wartościowe stringi, czyli zmienna CSS jako wartość dla content (spin-off).