① Свойство content
CSS content генерирует содержимое, которое визуально отображается на экране монитора, не добавляясь к дереву документа DOM. Программы для чтения с экрана не имеют доступ к содержимому, созданному с использованием псевдоэлементов и не могут его прочитать, поэтому рекомендуется не использовать псевдоэлементы для вставки важного контента на страницу.
Содержимое, вставляемое с помощью свойства content
, появляется внутри элемента, до или после его содержимого. С помощью CSS можно генерировать содержимое следующими способами:
— с помощью свойства content
в сочетании с псевдоэлементами ::before
и ::after
;
— с помощью свойств counter-increment
и counter-reset
.
Содержание:
1. Свойство content
2. Добавление специального символа
3. Добавление текста и изображения
4. Добавление блочного содержимого
5. Добавление значения атрибута и кавычек
6. Форматирование кавычек: свойство quotes
Поддержка браузерами
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 позволяют ссылаться на эту не имеющую доступа информацию. Псевдоэлементы также предоставляют дизайнерам стилей способ присвоить стиль содержимому, которого нет в исходном документе.
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
- Наследует значение свойства от родительского элемента.
Продолжение в следующей статье!