На contentсобственост в CSS се използва във връзка с псевдо-елементи ::beforeи ::after. Използва се за буквално вмъкване на съдържание. Има четири типа стойности, които може да има.
Струна
.name::before ( content: "Name: "; )Тогава елемент като този:
Chris Ще се изобрази така:
Name: ChrisТова може да е и празен низ, който често се среща в неща като clearfix.
Брояч
div::before ( content: counter(my-counter); )Повече информация за това.
Изображение
div::before ( content: url(image.jpg.webp); )Това е буквално изображение на страницата, каквото display: blockпо някакъв начин, оразмерите го и използвате background-image. По този начин можете да го преоразмерите background-size.
Атрибут
Можете да използвате стойности (низове, така или иначе), които са взети точно от атрибутите в HTML.
60 (data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )Най- attr()функцията не разполага с "типове", просто все още, така че не може да премине на стойност като 20px(само струни), но някой ден!
Алтернативен текст
Спецификацията казва, че можете да използвате a /в синтаксиса, за да изброите алтернативен текст. Например…
.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )Може би бихте могли да го използвате като ...
- Make Bed
- Grocery Shop
- Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )Повече информация
Вмъкнатото по този начин съдържание всъщност не е в DOM, така че има някои ограничения. Например не можете да прикачите събитие директно (само) към псевдоелементи. Също така е несъвместимо дали текстът, вмъкнат по този начин, се чете от екранните четци (обикновено това е в наши дни) или ако можете да го изберете (обикновено не е тези дни).
- Готини неща, които псевдо елементите могат да направят
- Презентация за псевдоелементите
- MDN Документи
Поддръжка на браузър
Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.
работен плот
| Chrome | Firefox | IE | Ръб, край | Сафари |
|---|---|---|---|---|
| 4 | 2 | 9 | 12 | 3.1 |
Мобилен / таблет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
За Opera url()се поддържа само във версия 7+.