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:

Przykład użycia własności CSS content

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:

Efekt użycia własności CSS content z funkcją attr()

Podsumowanie

ZastosowanieWszystkie elementy HTML, pseudoelementy CSS obecne w drzewie dokumentu oraz pola marginesów strony
Wartość początkowanormal
DziedziczenieNie
Specyfikacja CSSCSS Generated Content Module, content

Podobał Ci się ten artykuł?

Oceń go!

Średnia 0 / 5. Liczba głosów: 0

Jeszcze nikt nie głosował. Wyprzedź innych i zagłosuj.

Skoro spodobał Ci się ten artykuł...

Poleć go znajomym!

Ojej :( Powiedz nam, co powinniśmy poprawić!

Jajko z dzwonkiem
Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.

Autor: Łukasz Piwko

Dodaj komentarz

4 × 1 =