2.11. CSS content

css-contentCSS content генерирует содержимое, которое визуально отображается на экране монитора, не добавляясь к дереву документа DOM. Программы для чтения с экрана не имеют доступ к содержимому, созданному с использованием псевдоэлементов и не могут его прочитать, поэтому рекомендуется не использовать псевдоэлементы для вставки важного контента на страницу.

Содержимое, вставляемое с помощью свойства content, появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content в сочетании с псевдоэлементами ::before и ::after;
— с помощью свойств counter-increment и counter-reset.

Добавление генерируемого содержимого на веб-страницу

1. Свойство content

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

IE: 9.0, не поддерживает анимацию и переходы псевдоэлементов
Firefox: 4.0
Chrome: 4.0, анимация и переходы псевдоэлементов — с 26.0
Safari: 4.0, не поддерживает анимацию и переходы псевдоэлементов
Opera: 4.0, не поддерживает анимацию и переходы псевдоэлементов
iOS Safari: 7.1
Opera Mini: 8
Android Browser: 4.1
Chrome for Android: 44

В основе генерируемого содержимого лежат псевдоэлементы ::before или ::after. Псевдоэлементы создают абстракции о дереве документа помимо тех, которые определены языком документа, в данном случае — HTML. Например, HTML не предлагает механизмы доступа к первой букве или первой строке содержимого элемента. Псевдоэлементы CSS позволяют ссылаться на эту не имеющую доступа информацию. Псевдоэлементы также предоставляют дизайнерам стилей способ присвоить стиль содержимому, которого нет в исходном документе.

h1:before, h1:after {
content: "";
}

Генерируемое содержимое наследует значения свойств от элемента, к которому оно прикрепляется. При этом наследуются только наследуемые свойства.

content
Значения:
normal Значение по умолчанию, означает отсутствие добавляемого содержимого.
none Не добавляет содержимое. Используется в случае, когда нужно удалить генерируемое содержимое для одного элемента из группы элементов (например, элементы списка), для которых уже задано это свойство.
counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и приращение на некоторую величину с помощью свойства counter-reset. Для прямого увеличения счёта необходимо использовать свойство counter-increment.
attr() Добавляет до или после элемента значение атрибута, заключённого в скобки. Чтобы вставить пробел между основным содержимым и генерируемым, нужно добавить пробел перед скобкой или после нее, например, content: attr( href);
" " Текст, который добавляется на веб-страницу, должен быть заключен в двойные или одинарные кавычки. Пустые кавычки можно использовать для добавления блочного содержимого.
open-quote Добавляет к содержимому открывающую кавычку.
close-quote Добавляет к содержимому закрывающую кавычку.
no-open-quote Удаляет открывающую кавычку, при этом уровень их вложенности продолжает учитываться.
no-close-quote Удаляет закрывающую кавычку.
url() Добавляет медиа-содержимое, например, изображение, звук, видео. В качестве значения атрибута в скобках указывается адрес внешнего ресурса, который вставляется в выбранное место документа.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

1.1. Добавление специального символа

See the Pen wzKZgX by Elena (@html5book) on CodePen.

Можно оживить текст с помощью добавления специальных символов. В качестве значения используется символ Юникода.

h1 { 
font-family: 'Niconne', cursive; 
font-size: 50px; 
color: #e12527; 
}
h1:before, h1:after { 
content: "\2746"; 
display: inline-block; 
font-size: 60px; 
color: #38afaa; 
-webkit-animation: my 4s infinite alternate; 
animation: my 4s infinite alternate; 
}
h1:before { 
margin-right: 0.5em; 
}
h1:after { 
margin-left: 0.5em; 
}
@-webkit-keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }
@keyframes my {
    0%   {color: #2e2f92;}
    25%  {color: #38afaa;}
    50%  {color: #5b59a7;}
    75%  {color: #f7b21c;}
    100% {color: #e12527;}
 }

1.2. Добавление текста

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

h1:before, h1:after {
content: "Yay!";
font-family: 'Dancing Script', cursive;
color: #f7b21c;
text-shadow: 1px 1px 2px grey; 
}
h1:before {
margin-right: 30px;
}
h1:after {
margin-left: 30px;
}

1.3. Добавление изображения

content_image

h1:before { 
content: url(https://html5book.ru/images/left-twig.png); 
display: inline-block;
margin-right: 10px; 
}

1.4. Добавление блочного содержимого

content_block

*{box-sizing:border-box;}
div {
  position: relative;
  width: 680px;
  height: 100px;
  border: 1px solid #C2C9D5;
  margin-top: 40px;
  background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED)
}
/*Кружок*/
div:nth-child(1):before {
  content: "";
  display: inline-block;
  position: absolute;
  left: calc(50% - 11px);
  left: -webkit-calc(50% - 11px);
  top: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #AC170E;
  background: orangered;
  box-shadow: 0 2px 4px  #292825;
}
/*Треугольник*/
div:nth-child(2):before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent hotpink transparent;
  position: absolute;
  left: calc(50% - 15px);
  left: -webkit-calc(50% - 15px);
  top: -21px;
}
/*Зебра*/
div:nth-child(3):before{
  content: "";
  display: inline-block;
  position: absolute;
  height: 10px;
  width: 100%;
  background: repeating-linear-gradient(45deg, turquoise, turquoise 10px, #D7DFED 10px, #D7DFED 20px);
}
/*Треугольник с обводкой*/
div:nth-child(4) {
  border: 3px solid #3E3A40;
}
div:nth-child(4):before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid #3E3A40;
  transform: rotate(135deg);
  position: absolute;
  left: calc(50% - 11px);
  left: -webkit-calc(50% - 11px);
  top: -15px;
  background:linear-gradient(to top right,#CDD3CD, #EEF0EE, #CDD3CD);
  z-index: -1;
}

1.5. Добавление значения атрибута

Функция attr() позволяет добавить любое значение атрибута, например, url-адрес ссылки, который будет выводиться при печати текста.

a:after {
  content: attr(href);
}

1.6. Добавление кавычек

content_quotes
С помощью значений open-quote и close-quote можно генерировать открывающие и закрывающие кавычки. Внешний вид кавычек указывается в свойстве quotes. Если оно не задано, то будут использованы значения браузера по умолчанию.

<blockquote>Some text</blockquote>
blockquote {
  quotes: "\2039" "\203A";
  font-size: 40px;
  font-family: 'Sigmar One', cursive;
}
blockquote:before {
  content: open-quote;
  color: mediumvioletred;
  margin-right: 10px;
}
  blockquote:after  {
  content: close-quote;
  color: mediumvioletred;
  margin-left: 10px;
}

1.7. Добавление счетчика элементов

ccontent_counters
Значение функции counter() позволяет пронумеровать любые блочные элементы на веб-странице. Счетчики создаются при помощи CSS-свойств counter-reset и counter-increment.

1.7.1. Имя счетчика

Свойство counter-reset задает имя одного или нескольких счетчиков, позволяя устанавливать или сбрасывать значение счетчика до любого значения. Свойство используется только в сочетании со вторым свойством — counter-increment. Работает для любых HTML-элементов.

counter-reset
Значения:
none Значение по умолчанию. Счетчик не установлен.
имя счётчика число Имя счётчика выбирает один или несколько элементов, для которых требуется изменить значение счетчика. Число задает начальное счетчика. Не допускается использование ключевых слов в качестве имени счетчика. Если нужно установить нумерацию с единицы, необходимо задать counter-reset: 0;. Если нужно, чтобы нумерация начиналась с нуля, то counter-reset: -1;.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.
1.7.2. Приращение счетчика

Свойство counter-increment принимает одно или несколько значений, которые определяют имена счетчиков, которые будут приращены.

counter-increment
Значения:
none Значение по умолчанию. Отсутствие приращения для счетчика.
имя счётчика число Имя счётчика определяет, какой счетчик будет приращен. Значение по умолчанию 1. Если задано отрицательное число, то нумерация элементов будет отрицательная. Число задает начальное значение, а также шаг приращения, т.е. если установить counter-increment: id 2;, то первый элемент будет нумероваться с 2, второй — с 4 и т.д. Если идентификатор ссылается на счетчик, который не был инициализирован с помощью counter-reset, то начальное значение будет равно 0.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Значение свойства content: counter(имя счетчика) выводит значение счетчика в качестве содержимого псевдоэлемента.

<h2>Title</h2>
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
<h2>Title</h2>
    <p>Some text</p>
    <p>Some text</p>
body {
  counter-reset: h2;/*создаем счетчик для любого заголовка h2*/
  } 
h2 {
  counter-reset: p; /*создаем счетчик для абзацев р так, чтобы в каждой группе абзацев нумерация шла от номера заголовка*/
  color: #0ba7e2;
  }
h2:before {
  content: "Part " counter(h2) ". "; /*добавляем в начале каждого заголовка текст с пробелом, текущее значение счетчика и снова текст (в данном случае точку и пробел)*/
  counter-increment: h2; /*задаем увеличение нумерации, при каждом появлении элемента h2 счетчик будет увеличиваться на единицу*/}
p {
color: #3b4849;
  }
p:before {
  margin-left: 30px;
  content: counter(h2) "." counter(p) '. ';/*добавляем в начале каждого абзаца значение счетчика h2, текст (в данном случае точка), счетчик абзацев и снова текст (точку с пробелом)*/
  counter-increment: p; /*задаем увеличение нумерации на единицу*/
  }

2. Свойство display: list-item

list_item
В спецификации CSS есть еще одна возможность генерации содержимого, она реализуется с использованием элементов, свойство display которых принимает значение list-item. Значение list-item свойства display превращает любые блочные элементы в элементы списка, позволяя задать для них любой вид нумерации через свойство list-style-type.

div {
display: list-item;
list-style-type: decimal-leading-zero;
font-weight: bold; 
font-size: 20px;
color: #DC143C;
}
  • Создание Сайтов

    Достойный конкурент Моржевичу

  • Здравствуйте Елена!
    Хорошая статья, рекомендую дополнить её описанием влияния свойства :nth-child на счётчики, вот для примера:

    li { display: block }
    li:nth-child(3) { counter-reset: list }
    li:before { content: url(http://atmpl.ru/favicon.ico);vertical-align: middle }
    li:after { content: » aTmpl » » [» counter(list, upper-roman) «]»;counter-increment: list 1 }

    • Здравствуйте. Спасибо за комментарий, но, я думаю, на практике такие случаи бывают очень редко. Небольшое замечание к коду — элементы списка по умолчанию являются блочными, так что li { display: block } является избыточным.

  • unKnown_observer

    Здрасти Елена. Если честно я не очень хорошо понял что такое «content» обьясните както по проще пожалуйста если не трудно! 🙂

    • Свойство добавляет в разметку элементы, так называемые псевдоэлементы. В разметке они не существуют, потому что добавляются с помощью css-стилей, а не с помощью html-тегов.

  • Михаил Кукочкин

    Здравствуйте, Елена! Отличный Блог! Спасибо! Что-то мне оказалось что content добавляет содержимое не перед элементом, а внутри элемента перед внутренним содержимом блока например (до или после). Не понял этот момент

    • Здравствуйте! Спасибо за вопрос, вы правы, поправила текст.