• Теория
  • Теория

Выдвигающееся описание, шаг 1

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

Суть данной техники заключается в том, чтобы не создавать в разметке дополнительные блоки для описания, а хранить тексты в пользовательских data- атрибутах элементов. Пользовательские атрибуты, начинающиеся с data-, могут быть добавлены любому HTML-элементу для хранения текстовой информации.

Особой прелестью такого подхода является то, что мы можем обращаться к текстовому значению атрибута HTML-элемента непосредственно из CSS. Делается это с помощью свойства content, задающего генерируемое содержимое псевдоэлементов и функции attr(), которая применяется для добавления значения атрибута HTML-элемента в стилевое свойство.

Например, если у нас есть в разметке элемент <p data-text="hello">world</p>, то мы можем получить надпись «hello world», взяв «hello» из атрибута data-text в CSS и отобразив его в псевдоэлементе ::before:

p::before {
  content: attr(data-text) " ";
// С помощью пустой строки в конце добавится пробел
}

В нашем случае давайте хранить тексты в атрибутах ссылки: заголовок блока в тексте атрибута data-title, а описательную часть — в атрибуте data-description. Соответственно заголовок будем выводить в качестве контента псевдоэлемента ::before, а описание — содержимым псевдоэлемента ::after.

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует завтра. Всего от 4970 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Мастерская: декоративные эффекты» тренажёра «Погружение в декоративные эффекты» можно после регистрации и оформления подписки.