В 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="http://tokar.ua">Tokar.ua</a>

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

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

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

<a data-title="простими словами про складне" href="http://tokar.ua">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>

Довідка по атрибуту content

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

Підтримка браузерами

Google Chrome Internet Explorer Firefox Safari Opera
content 1.0 8.0 1.0 1.0 4.0

Засновник і керівник видання Tokar.ua. Програміст, адміністратор української Вікіпедії.

Підтримайте Токар
50 грн.

10% середньостатистичної статті,
або ж пів дня роботи нашого сервера

Підтримати
Ось вона, нагода стати причетним до розвитку незалежних медіа!
Коменти
Ayrin Vira

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

Макс

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

Назар Токарь

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

Макс

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

Назар Токарь

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

Макс

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

Назар Токарь

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

Макс

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

Назар Токарь

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

Alexander Abramov

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

Назар Токарь

Спасибо :)