content
Wstawia treść generowaną w pseudoelementach ::before i ::after.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- pseudoelementy ::before i ::after (częściowo także zwykłe elementy)
- JavaScript
getComputedStyle(element, "::before").content
Przykład
#.external::after {
content: " ↗";
font-size: 0.8em;
}
.required label::after {
content: " *";
color: #f43f5e;
}<style>.ext::after { content: " ↗"; font-size: .8em; } .req::after { content: " *"; color: #f43f5e; }</style>
<p style="margin: 0 0 8px;"><a class="ext" href="#" style="color: #c4b5fd;">Dokumentacja MDN</a></p>
<label class="req">Adres e-mail</label>Definicja i zastosowanie
#Właściwość content określa, co pojawi się w pseudoelementach ::before i ::after. Bez niej te pseudoelementy w ogóle nie powstaną, dlatego nawet dekoracje bez tekstu wymagają content: "".
Wartością może być napis, wartość atrybutu elementu (attr(data-label)), licznik (counter()), cudzysłów (open-quote) albo obrazek (url()).
Treść z content służy do ozdobników, ikon i etykiet pomocniczych. Czytniki ekranu mogą ją odczytywać, ale nie da się jej zaznaczyć ani skopiować, więc nie umieszczaj tam ważnych informacji.
Składnia
#content: normal | none | "<napis>" | attr(<atrybut>) | counter(…) | open-quote | close-quote | url(…) [ / "<tekst alternatywny>" ]?;Wartości
#napis
Stały napis przed treścią.- Wartość atrybutu
data-labelelementu. - Cudzysłów otwierający, zależny od języka strony.
pusty napis
Pusty pseudoelement, np. jako kolorowy pasek.
Wartości w praktyce
#"★ "
.demo::before { content: "★ "; }attr(data-label)
data-label elementu..demo::before { content: attr(data-label); }open-quote
.demo::before { content: open-quote; }
.demo::after { content: close-quote; }""
.demo::before { content: ""; display: inline-block; width: 24px; height: 4px; vertical-align: middle; background: #a78bfa; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pamiętaj o
content: ""przy każdym pseudoelemencie dekoracyjnym, inaczej nie zobaczysz go na stronie. - Nie wstawiaj przez
contenttreści, bez której strona jest niezrozumiała. Takiego tekstu nie da się skopiować.
Powiązane hasła
#Widzisz błąd albo brakuje przykładu? Napisz do nas.