Właściwość content
Właściwość content pozwala wstawiać
do znaczników dowolny generowany tekst. Stosowana jest
wraz z pseudoelementami after
i before.
Składnia
selektor::after {
content: 'tekst';
}
selektor::before {
content: 'tekst';
}
Przykład
Dodajmy na początku i na końcu tekstu znacznika li
dodatkowy tekst:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
content: '!!!';
}
li::after {
content: '???';
}
:
Przykład
Do wstawianego tekstu można stosować różne style. Pokolorujmy, na przykład, ten tekst na jakikolwiek kolor:
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
li::before {
color: red;
content: '!!!';
}
li::after {
color: green;
content: '???';
}
:
Zobacz też
-
funkcję
attr,
która pobiera wartość atrybutu znacznika -
właściwość
counter-increment,
która ustawia automatyczną numerację
