Уроки з HTML і CSS: властивості content і attr

В CSS є властивість content, яку можна використовувати лише в псевдо-елементах :before і:after. Воно додає новий контент на сторінку, використовуючи селектор, який ви вкажете. Ось як це працює в CSS:

HTML поради програмування стаття

.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`	Спадкування властивості від батьківського елемента