CSS сгенерированное содержимое

Модуль CSS сгенерированного содержимого определяет, как содержимое элемента может быть заменено и как содержимое может быть добавлено в документ с помощью CSS.

Сгенерированное содержимое может использоваться для замены содержимого, в этом случае содержимое узла DOM заменяется на CSS <image>. CSS сгенерированное содержимое также позволяет генерировать содержимое, специфичное для языка, создавать настраиваемые номера и маркеры элементов списка и визуально добавлять содержимое, генерируя содержимое для псевдоэлементов, как анонимные элементы-замены.

Сгенерированное содержимое в действии

HTML для этого примера состоит из одного пустого <div> внутри в противном случае пустого <body>. Снеговик был создан с помощью CSS изображений и CSS фонов и границ. Морковный нос был добавлен с помощью сгенерированного содержимого: пустая область с широкой оранжевой левой границей, добавленной к псевдоэлементу ::before. Текст также является сгенерированным содержимым: «только один <div>» был сгенерирован с помощью свойства content, примененного к псевдоэлементу ::after.

Нажмите «Запуск» в примере выше, чтобы увидеть или отредактировать код в MDN Playground.

Справочник

Свойства

Примечание: Модуль CSS сгенерированного содержимого вводит четыре свойства, находящиеся на стадии риска, которые еще не реализованы: string-set, bookmark-label, bookmark-level, и bookmark-state.

Функции

Модуль CSS сгенерированного содержимого вводит шесть функций CSS, которые еще не реализованы, включая content(), string(), и leader(), а также три функции <target> target-counter(), target-counters(), и target-text().

Типы данных

Руководства

"Руководство по" добавлению сгенерированного содержимого: Изучите, как добавлять текстовое или графическое содержимое в документ, используя свойство content.
Создание стильных блоков с помощью сгенерированного содержимого: Пример стилизации сгенерированного содержимого для визуальных эффектов.

Связанные концепции

Модуль CSS псевдоэлементов
- ::before псевдоэлемент
- ::after псевдоэлемент
- ::marker псевдоэлемент
Модуль CSS списков и счетчиков
- counter() функция
- counters() функция
- counter-increment свойство
- counter-reset свойство
Модуль CSS значений и единиц
- attr() функция
- <string> тип данных
- <image> тип данных

Спецификации

Спецификация
CSS Модуль сгенерированного содержимого уровень 3

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_generated_content