Перейти к содержимому

Content css что это

  • автор:

content

Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами :after и :before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

Синтаксис

content: строка | attr(параметр) | open-quote | close-quote | no-open-quote | no-close-quote | url | counter | normal | none | inherit

Значения

Строка Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §). attr(параметр)
Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after добавит после ссылки её адрес, т.е. значение атрибута href . Если указанного атрибута нет, вернется пустая строка. open-quote Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes . close-quote Вставляет закрывающую кавычку. no-open-quotes
Отменяет добавление открывающей кавычки. no-close-quote
Отменяет добавление закрывающей кавычки. url Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется. counter Выводит значение счетчика, заданного свойством counter-reset . none Не добавляет никакое содержание. normal Задается как none для псевдоэлементов :before и :after . inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

    content   
Тег

Результат данного примера показан на рис. 1.

Применение свойства content

Рис. 1. Применение свойства content

Браузеры

Firefox до версии 2.0 включительно и Opera до версии 9.2 включительно не поддерживают значение none . Safari до версии 3.1 не поддерживает значение none и normal .

Chrome и Safari поддерживают свойство quotes для добавления кавычек с версии 11.0 и 5.1 соответственно.

content

Свойство, с помощью которого можно добавить на страницу то, чего нет в HTML-разметке.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 17 июля 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Когда задано свойство content , то элемент заменяется на значение этого свойства. В качестве значения могут быть переданы различные типы: изображение, градиент или текст.

Пример

Скопировать ссылку «Пример» Скопировано

 a::after  content: "��"; margin-right: 5px;> a::after  content: "��"; margin-right: 5px; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

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

Все значения ниже могут применяться ТОЛЬКО к псевдоэлементам : : before и : : after .

 div::before  content: "prefix";> div::before  content: "prefix"; >

Значения счётчиков с использованием функций counter ( ) и counters ( ) :

 div::before  content: counter(chapter_counter);> div::before  content: counters(section_counter, ".");> div::before  content: counter(chapter_counter); > div::before  content: counters(section_counter, "."); >

Значения HTML-атрибутов с использованием функции attr ( ) :

 div::before  content: attr(value string);> div::before  content: attr(value string); >

Ключевые слова, зависящие от языка страницы и положения в тексте:

 div::before  content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote;> div::before  content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; >

Использование нескольких значений одновременно. Исключение — ключевые слова normal и none :

 div::before  content: open-quote counter(chapter_counter);> div::before  content: open-quote counter(chapter_counter); >

Ключевые слова, которые нельзя комбинировать с другими значениями:

 div::before  content: normal; content: none;> div::before  content: normal; content: none; >

Как понять

Скопировать ссылку «Как понять» Скопировано

Чаще всего свойство content применяется к псевдоэлементам : : before и : : after . В зависимости от значения свойства псевдоэлемент принимает тот или иной вид:

  • Если значением является просто строка, то она подставляется на место псевдоэлемента. Как правило, это до или после текстового содержимого тега.
  • Есть несколько зарезервированных слов, которые также можно указывать в качестве значения. Используются они как совместно со свойством quotes , так и в автоматическом режиме:
    • open — quote обозначает открывающую кавычку цитаты для текущего языка. Например, для русского это будет открывающая «ёлочка» ( « );
    • close — quote обозначает закрывающую кавычку цитаты для текущего языка. Например, для русского это будет закрывающая «ёлочка» ( » );
       Вспомните, как говорили мушкетёры: Один за всех, все за одного!  blockquote> Вспомните, как говорили мушкетёры: q>Один за всех, все за одного!q> blockquote>      
     blockquote  quotes: "«" "»" "„" "”";> blockquote::before  content: open-quote;> blockquote::after  content: close-quote;> blockquote  quotes: "«" "»" "„" "”"; > blockquote::before  content: open-quote; > blockquote::after  content: close-quote; >      
    «Вспомните, как говорили мушкетёры: „Один за всех, все за одного!”»
    • no — open — quote и no — close — quote используются, когда не нужно отображать кавычки, но при этом продолжать увеличивать уровень вложенности;
    • Если значением является результат выполнения функций counter ( ) или counters ( ) , то псевдоэлемент будет содержать вычисленное значение счётчика в текущий момент. Эти функции работают совместно со свойствами counter — reset и counter — increment ;
    • Очень интересным значением является результат выполнения функции attr ( ) .

    С помощью неё можно вывести в псевдоэлемент значение любого атрибута тега:

       Ваш рейтинг: 212  p> Ваш рейтинг: span data-tip="Вычисляется на основе активности">212span> p>      
     [data-tip]  position: relative; cursor: help;> [data-tip]:hover::after  opacity: 1; visibility: visible;> [data-tip]::after  content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden;> [data-tip]  position: relative; cursor: help; > [data-tip]:hover::after  opacity: 1; visibility: visible; > [data-tip]::after  content: attr(data-tip); position: absolute; top: 140%; left: 50%; transform: translateX(-50%); opacity: 0; visibility: hidden; >

    Вывод ссылки на печать

    �� . или красиво оформить нумерованный перечень

     .benefits  counter-reset: benefits;> .benefits-item  counter-increment: benefits;> .benefits-item::before  content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7;> .benefits  counter-reset: benefits; > .benefits-item  counter-increment: benefits; > .benefits-item::before  content: counter(benefits); position: absolute; font-size: 190px; font-weight: bold; left: 0; top: -0.35em; opacity: 0.5; color: #1A5AD7; >

    CSS свойство content

    Свойство content используется вместе с псевдоэлементами ::before и ::after для создания контента внутри элемента. Имеет следующие значения:

    • normal
    • none
    • counter
    • attr
    • string
    • open-quote
    • close-quote
    • no-open-quote
    • no-close-quote
    • url

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

    Объекты, вставленные с помощью свойства content, являются анонимными замененными элементами.

    Значение по умолчанию normal
    Применяется К псевдоэлементам ::before и ::after
    Наследуется Нет
    Анимируемое Нет
    Версия CSS2
    DOM синтаксис object.style.Content = «none»;

    Синтаксис

    content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;

    Пример

    html> html> head> title>Заголовок документа title> style> p::before < content: "Name -"; > .country::before < content: normal; > style> head> body> h2>Пример свойства content h2> p>Меня зовут Джон p> p class="country">Я живу в Канаде p> body> html>

    Пример со значением «string»:

    Пример

    html> html> head> title>Заголовок документа title> style> li:before< content:"List item"; > p:after< content:" with string value."; > style> head> body> h2>Пример свойства content h2> ul> li>1 li> li>2 li> li>3 li> ul> p>Какой-либо параграф. p> body> html>

    Пример со значением «open-quote». Значение «open-quote» не может быть применено без «close-quote».

    Пример

    html> html> head> title>Заголовок документа title> style> p::before < content: open-quote; > p::after < content: close-quote; > style> head> body> h2>Пример свойства content h2> p>Привет, меня зовут Джон. p> p>Я из Канады. p> body> html>

    Значения

    Значение Описание
    normal Устанавливает нормальный контент. Значение по умолчанию
    none Устанавливает пустой контент. Псевдоэлемент не генерируется.
    counter Дает возможность создать счетчик.
    attr Устанавливает контент в значение одного из атрибутов селектора.
    string Устанавливает контент в указанный вами текст.
    open-quote Устанавливает открывающую кавычку.
    close-quote Устанавливает закрывающую кавычку.
    no-open-quote Удаляет открывающую кавычку из контента.
    no-close-quote Удаляет закрывающую кавычку из контента.
    url Добавляет медиа-контент — изображение, звук, видео. Если указанный файл не может быть отображен, значение игнорируется, или будет отображен заполнитель.
    initial Устанавливает свойство в значение по умолчанию.
    inherit Значение элемента наследуется от родительского элемента.

    Поддержка браузера

    1.0+ 1.0+ 1.0+ 4.0+

    content¶

    Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

    Применяется совместно с псевдоэлементами ::after и ::before , они соответственно указывают отображать новое содержимое после или до элемента, к которому добавляются.

    Демо¶

    Списки, счетчики, генерируемый контент

    • counter-increment
    • counter-reset
    • counter-set
    • list-style-image
    • list-style-type
    • list-style-position
    • list-style

    Синтаксис¶

     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
    /* Keywords that cannot be combined with other values */ content: normal; content: none; /* values */ content: url('http://www.example.com/test.png'); content: linear-gradient(#e66465, #9198e5); content: image-set('image1x.png' 1x, 'image2x.png' 2x); /* alt text for generated content, added in the Level 3 specification */ content: url('http://www.example.com/test.png') / 'This is the alt text'; /* value */ content: 'prefix'; /* list of content values */ content: 'prefix' url('http://www.example.com/test.png'); content: 'prefix' url('http://www.example.com/test.png') 'suffix' / 'This is some alt text'; /* values, optionally with */ content: counter(chapter_counter); content: counter(chapter_counter, upper-roman); content: counters(section_counter, '.'); content: counters( section_counter, '.', decimal-leading-zero ); /* 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 counter(chapter_counter); /* Global values */ content: inherit; content: initial; content: revert; content: revert-layer; content: unset;

    Значения¶

    Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда ( &sect ; например), будут отображаться как есть, т. е. простым текстом ( &sect ;, а не § ).

    Возвращает строку, которая является значением атрибута тега указанного в скобках. Например, a::after добавит после ссылки её адрес, т. е. значение атрибута href . Если указанного атрибута нет, то вернётся пустая строка.

    Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes .

    Вставляет закрывающую кавычку.

    Отменяет добавление открывающей кавычки.

    Отменяет добавление закрывающей кавычки.

    Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.

    Выводит значение счётчика, заданного свойством counter-reset .

    Не добавляет никакого содержимого.

    Задаётся как none для псевдоэлементов ::before и ::after .

    Похожие публикации:
    1. Как задать текстовый файл в c
    2. Как написать мод для майнкрафт на python
    3. Как считать целую строку в с
    4. Как установить библиотеку в компас 21

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *