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

Суть данной техники заключается в том, чтобы не создавать в разметке дополнительные блоки для описания, а хранить тексты в пользовательских 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.