content / CSS3

Описание значений свойства content CSS3

Все значения могут сгенерированы элементу свойствами :before (в начало) и :after (в конец).

Значение content в виде текста

Элементу могут быть добавлены любые текстовые значения, добавленный текст не конвертируется и отображается как есть. Текстовые значения должны помещаться в кавычки, двойные или одинарные.

Пример использования значения в виде текста

<style>
#content--text {
color:blue; 
font-weight:bold; 
font-size:2em;
}
#content--text:before{
content:"перед"
}
#content--text:after{
content:"после"
}
</style>
<div id="content--text"> | </div>

Значение content в виде символа иконки

Символы HTML имеют значения для использования в свойстве content, выбрать подходящий символ можно при помощи генератора символов HTML и CSS. Значения символов должны помещаться в двойные или одинарные кавычки.

Возможны случаи конвертирования символов вместо реального отображения иконки, в такой ситуации стили символов должны быть подключены во внешнем файле, в общей таблице стилей CSS.

Пример использования значения в виде символа иконки

► Нажмите на значёк в редакторе для показа результата.

Значение content с пустыми кавычками для блока

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

Пример использования пустых кавычек для блоков

► Нажмите на значёк в редакторе для показа результата.

Значение content в виде url

Значение url для добавления адреса в начало или конец элемента. Адресом может быть ссылка на страницу или изображение, а так же Data URI адрес.

Пример использования значения url

<style>
a#content--url {
text-decoration:none
}
#content--url:before{
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAlUlEQVQ4jc3SwQkCQQyF4U8RsRSxG23CumxAb2IDYgdiD+J5ZVfUw+7C6IIZ9yD+EBhI3iSPhH9ihQKPIIqmtsMlQ9zGuRWNkg+WmGMcTFpi84WzzwyS9wxTDAPNDacmXjigEvuvsG9FabdhRvdOXR8L92b8Y0azmHSChXqNk0BzVa9x/Z7odUip3636SCJK7DLqfsQT93w9G2KQozIAAAAASUVORK5CYII=) " aTmpl";
color:#ddd
}
</style>
<a href="http://atmpl.ru/" id="content--url"> Адаптивный сайт</a>

Значение content в виде counter

Значение counter свойства content добавляет счётчик с установленными параметрами и выводимыми данными. Параметры счётчика указываются в свойствах counter-reset и counter-increment самих счётчиков может быть несколько.

Параметры счётчика могут быть переопределены свойством :nth-child / CSS3, свойство может оказывать радикальное влияние на показания счётчиков, разумеется с его помощью можно извлечь дополнительный запас настройки.

Свойство CSS3 counter-reset

Свойство counter-reset идентифицирует счётчик устанавливая ему уникальное имя, актуально при добавлении свойства counter-increment.

counter-reset: none;

Отсутствие счётчика

counter-reset: name;

Устанавливает уникальное имя счётчика для элемента, имён может быть несколько.

counter-reset:inherit;

Уникальное имя будет наследовано из родителького элемента.

Свойство CSS3 counter-increment

Свойство counter-increment инициализирует счётчик по имени указанном в свойстве counter-reset, при добавлении числовых значений отсчёт ведётся от указанного числа с последующей последовательностью геометрической прогрессии. Если установлено 3, следующими значениями счётчика будут 6, 9, 12...

counter-reset: none;

Отсутствие данных счётчика

counter-reset: name 1;

Устанавливает уникальное имя счётчика для элемента, и исходное значение для последующей последовательности вывода значений.

counter-reset:inherit;

Уникальное имя будет наследовано из родителького элемента.

Значения типа данных счётчика

Вы можете использовать значения тип отображаемых данных счётчика в любой комплектации.

decimal

decimal-leading-zero

lower-roman

upper-roman

georgian

armenian

lower-latin

lower-alpha

upper-latin

upper-alpha

lower-greek

Применение свойства counter для <dl>

► Нажмите на значёк в редакторе для показа результата.

Применение свойства counter для 3 заголовков

► Нажмите на значёк в редакторе для показа результата.

Применение свойства counter с :nth-child

Попробуйте испытать воздействие свойства :nth-child на показание счётчиков, предлагается пример со смещёнными значениями.

► Нажмите на значёк в редакторе для показа результата.

Значение content в виде attr

Значение attr генерирует содержимое указанного атрибута.

<style>
a#content--link { font: bold italic 2em serif }
a#content--link:before { content: url(http://atmpl.ru/favicon.ico) " "; }
a#content--link:after { color: #ddd;content: " " attr(data-description) }
</style>
<a id="content--link" href="http://atmpl.ru/" data-description="Адаптивный сайт">aTmpl</a>

Значение content в виде open-quote и close-quote

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

► Нажмите на значёк в редакторе для показа результата.

Значение content в виде no-open-quotes и no-close-quote

Значение no-open-quotes запрещает показ отрывающей кавычки, а no-close-quote отменяет закрывающую ковычку.

► Нажмите на значёк в редакторе для показа результата.