Własność CSS content

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 oznacza none, 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ą funkcji counter() lub counters(). 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 i close-quote, które są zastępowane przez łańcuchy zdefiniowane we własności quotes, lub słowa kluczowe no-open-quote i no-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