🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Доступно в Baseline в статусе «Newly Available» c 2024-07-09.

Свойство content в CSS управляет вставкой содержимого в элементы, особенно часто его используют для добавления иконок или текста перед/после элементов. Также через content можно задавать альтернативный текст для генерируемого контента, что полезно для доступности. Когда в content используется url с символом /, этот синтаксис позволяет добавить альтернативный текст к изображению или контенту, делая его более понятным для экранных читалок.

Например, чтобы сделать SVG-иконку доступной, можно использовать следующий подход:

.icon::after {
  content: url('upvote-icon.svg') / 'Upvote';
}

Здесь content с url вставляет SVG, а / 'Upvote' добавляет читаемый текст, который увидят пользователи с ограниченными возможностями. Такой приём повышает доступность элементов с графикой.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.