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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 4 | 2 | 9 | 12 | 3.1 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
Для Opera url()поддерживается только в версии 7+.