Własność CSS content służy głównie do wstawiania treści (tekstu, obrazów, liczników CSS itd.) do pseudoelementów, ale może być też używana ze zwykłymi elementami, chociaż w bardzo ograniczonym zakresie.
W przypadku zwykłych elementów własność ta ma tylko jedno zastosowanie: może zastąpić wybrany element obrazem graficznym, opcjonalnie z dodatkowym tekstem alternatywnym.
Wartości i składnia własności CSS content
Własność content
przyjmuje następujące wartości:
- Słowo kluczowe none
- W przypadku zwykłych elementów HTML ta wartość działa jak
normal
, a w przypadku pseudoelementów CSS powoduje zablokowanie ich utworzenia. - Słowo kluczowe normal
- Jest to wartość domyślna, która nic nie zmienia w domyślnych ustawieniach elementów i pseudoelementów. W związku z tym dla pseudoelementów
::before
i::after
oznaczanone
, a dla innych pseudoelementów, takich jak::marker
,::placeholder
czy ::::file-selector-button
, oznacza ich normalną treść. Z kolei dla zwykłych elementów oznacza ich elementy potomne. - Łańcuch znaków
- Ciąg znaków lub kilka ciągów znaków w cudzysłowach pojedynczych lub podwójnych, rozdzielonych spacjami, np.:
content: "pierwszy ciąg znaków" 'drugi ciąg znaków';
- Obraz
- Dowolny typ obrazu obsługiwany przez CSS, czyli np. definicja gradientu CSS, funkcja CSS image-set()() albo funkcja CSS url()(). Ten typ wartości zastępuje element lub pseudoelement oraz powoduje, że jego treść nie zostaje wyrenderowana oraz nie generuje on na stronie pola, jakby miał ustawienie
display: none
, np.:p { content: linear-gradient(red, green, blue); }
Dla dowolnego elementu p ta reguła spowoduje następujący wynik:
Istnieje także rozszerzony rodzaj składni z tekstem alternatywnym, który podaje się w cudzysłowie po ukośniku, np.:
content: linear-gradient(red, green, blue) / "Trzykolorowy gradient liniowy";
Tekst alternatywny jest przeznaczony dla czytników ekranu.
- Licznik CSS
- Licznik CSS, najczęściej zdefiniowany przez własność CSS
counter-reset
, można wstawić za pomocą funkcjicounter()
lubcounters()
. Po liczniku również można wstawić tekst alternatywny, umieszczając go po ukośniku w taki sam sposób, jak w przypadku obrazów. - Słowa kluczowe cudzysłowów
- Są to słowa kluczowe
open-quote
iclose-quote
, które są zastępowane przez łańcuchy zdefiniowane we własnościquotes
, lub słowa kluczoweno-open-quote
ino-close-quote
, które nic nie dodają, ale zmieniają poziom zagnieżdżenia cytatu. - Funkcja attr()
- Funkcja
attr()
wstawia wartość określonego atrybutu wybranego elementu. Można ją na przykład wykorzystać do dodawania adresów łączy w wersji arkusza stylów do druku:CSS:
a[href^="http"]::after { content: " (URL: " attr(href) ")"; }
HTML:
<a href="https://shebang.pl/css">Kurs CSS</a> <a href="https://shebang.pl/html">Kurs HTML</a>
Efekt:
Podsumowanie
Zastosowanie | Wszystkie elementy HTML, pseudoelementy CSS obecne w drzewie dokumentu oraz pola marginesów strony |
---|---|
Wartość początkowa | normal |
Dziedziczenie | Nie |
Specyfikacja CSS | CSS Generated Content Module, content |