Назар Токар
Опубліковано: 11 Квітня 2015
Оновлено: 5 Травня 2017

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

.phone-number:before { 
 content: "Номер телефона: "; 
}

В HTML нужному элементу назначается класс:

<ul>
 <li class="phone-number">+44-35-567-89-00</li>
</ul>

Результат получится таким:

Номер телефона: +44-35-567-89-00

Зачем добавлять текст через CSS?

На первый взгляд такая конструкция может показаться сложной. Зачем вставлять текст через стили, если мы можем добавить его напрямую в HTML? Хороший вопрос. Если перед вами стоит задача в вёрстке одной небольшой страницы без повторения элементов, то можно обойтись классическими свойствами.

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

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

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

Использование атрибутов

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

<a title="блог о программировании" href="https://tokar.ua">блог Назара Токаря</a>

Мы можем вывести перед ней её заголовок при помощи такого кода:

a:before { 
  content: attr(title) ": "; 
}

Вы можете использовать любые атрибуты элементов при помощи конструкции attr(имя-атрибута). Также можно пользоваться data-* атрибутами, которые не будут влиять на остальное поведение элемента (в отличие от того же title, например):

<a data-title="блог о программировании" href="https://tokar.ua">блог Назара Токаря</a>

В CSS в таком случае будет такой код:

a:before { 
  content: attr(data-title) ": "; 
}

Пример: всплывающая подсказка на CSS

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

a {
 color: darkred;
}
a:hover {
 color: red;
 position: relative;
}
a[title]:hover:after {
 content: attr(title);
 box-shadow: 0 0 4px #aaa;
 background: #efefef;
 padding: 7px 15px;
 color: #333;
 left: 0; 
 top: 110%;
 position: absolute;
 white-space: nowrap; 
 border-radius: 3px; 
 -moz-border-radius: 3px; 
 -webkit-border-radius: 3px; 
 -moz-box-shadow: 0 0 4px #aaa; 
 -webkit-box-shadow: 0 0 4px #aaa; 
}

В результате при наведении на ссылку под ней появится такой блок:
результат css content

Пример: нумерация элементов на CSS

Элементы списков, параграфы и вообще любые элементы можно автоматически нумеровать при помощи CSS. Достичь такого результата мы можем при помощи пары строк в файле стилей:

li {
counter-increment: my-index;
}
li:before {
content: counter(my-index) ': ';
}

Код HTML не требует никаких объяснений:

<ul>
<li>теремки</li>
<li>ипподром</li>
<li>выставочный центр</li>
</ul>

И результат:

нумерация списка при помощи CSS

Справка по атрибуту content

ЗначениеОписание
normalЗначение по умолчанию. Меняет содержимое на установленное по умолчанию. Обычно это пустое значение.
noneПустое содержимое
counterЗначение, взятое из счётчика
attr(attribute)Контент из указанного атрибута
stringУказанный текст
open-quoteОткрывающая кавычка
close-quoteЗакрывающая кавычка
no-open-quoteУдаляет из содержимого открывающую кавычку
no-close-quoteУдаляет из содержимого закрывающую кавычку
url(url)Медиа-содержимое: изображение, звук, видео
initialВозвращает значение по умолчанию
inheritНаследование свойства от родительского элемента

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

Google ChromeInternet ExplorerFirefoxSafariOpera
content1.08.01.01.04.0
← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    11 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

    Спасибо, очень полезные посты!

    А с какими версиями браузеров работают эти свойства?

    Автор
    Назар Токар

    @Макс, я обновил пост и добавил эти данные. Спасибо за подсказку.

    @Назар Токарь, вам спасибо за информацию. Судя по табличке этими свойствами сейчас можно смело пользоваться.

    Автор
    Назар Токар

    @Макс, вполне можно, безопасное средство. Думаю, самое удобное это нумерация абзацев и блоков.

    Только недавно читал вашу критическую статью о создании Яндекс браузера и вот сегодня мобильный Яндекс браузер блокирует ваш сайт... Совпадение? :-)

    Автор
    Назар Токар

    @Макс, вот это новость! А что пишет? :)

    @Назар Токарь, писал, что опасный сайт, типа того. Обновил страницу, вроде норм. Может объявление попалось не хорошее.

    Автор
    Назар Токар

    @Макс, гугл стал в объявления добавлять JS, а после сжатия он может напоминать вирусы. Версия похожа на правду :)

    Век живи - век учись! Очень полезная статья. Спасибо дедушка Назар за такое дело! :-) #CSS #HTML

    Автор
    Назар Токар

    Спасибо :)