В CSS є властивість content
, яку можна використовувати лише в псевдо-елементах :before
і:after
. Воно додає новий контент на сторінку, використовуючи селектор, який ви вкажете. Ось як це працює в CSS:
.phone-number:before { content: "Номер телефону: "; }
В HTML потрібного елементу призначається клас:
<ul> <li class="phone-number">+44-35-567-89-00</li> </ul>
Результат вийде таким:
Навіщо додавати текст через 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
Елементи списків, параграфи і взагалі будь-які елементи можна автоматично нумерувати за допомогою 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 |
Спадкування властивості від батьківського елемента |
Підтримка браузерами
content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Спасибо, очень полезные посты!
А с какими версиями браузеров работают эти свойства?
@Макс, я обновил пост и добавил эти данные. Спасибо за подсказку.
@Назар Токарь, вам спасибо за информацию. Судя по табличке этими свойствами сейчас можно смело пользоваться.
@Макс, вполне можно, безопасное средство. Думаю, самое удобное это нумерация абзацев и блоков.
Только недавно читал вашу критическую статью о создании Яндекс браузера и вот сегодня мобильный Яндекс браузер блокирует ваш сайт… Совпадение? :-)
@Макс, вот это новость! А что пишет? :)
@Назар Токарь, писал, что опасный сайт, типа того. Обновил страницу, вроде норм. Может объявление попалось не хорошее.
@Макс, гугл стал в объявления добавлять JS, а после сжатия он может напоминать вирусы. Версия похожа на правду :)
Век живи – век учись! Очень полезная статья. Спасибо дедушка Назар за такое дело! :-) #CSS #HTML
Спасибо :)