Описание тега css-content

Описание тега Вопросы с тегом

Созданный с помощью CSS контент позволяет нам вставлять и перемещать контент по документу. Мы можем использовать это для создания сносок, концевых сносок и примечаний к разделам, а также счетчиков и строк, которые можно использовать для запуска верхних и нижних колонтитулов, нумерации разделов и списков.

CSS-контент, автоматическая нумерация и списки

Авторы указывают стиль и расположение создаваемого контента с помощью :before а также :afterпсевдоэлементы. Как видно из их названий,:before а также :afterпсевдоэлементы определяют расположение содержимого до и после содержимого дерева документа элемента. Вcontent Свойство в сочетании с этими псевдоэлементами определяет, что вставляется.

Например, следующее правило вставляет строку "Примечание: " перед содержимым каждого элемента P, атрибут "class" которого имеет значение "note":

p.note:before {
    content: "Note: ";
}

Примеры

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <url> value */
content: url("http://www.example.com/test.png");

/* <image> value */
content: linear-gradient(#e66465, #9198e5);

/* values below can only be applied to generated content using ::before and ::after */

/* <string> value */ 
content: "prefix";

/* <counter> values */
content: counter(chapter_counter);
content: counters(section_counter, ".");

/* attr() value linked to the HTML attribute value */
content: attr(value string);

/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* Except for normal and none, several values
   can be used simultaneously */
content: open-quote chapter_counter;

/* Global values */
content: inherit;
content: initial;
content: unset;

Описание тега css-content

CSS-контент, автоматическая нумерация и списки

Примеры

Ресурс