You Don’t Know CSS: Свойство content⁠⁠

Привет, пикабу! Решил написать серию небольших постов про Frontend в которых постараюсь рассказать о свойствах CSS, которые мало кто знает или не знает всех возможностей.

Итак, сегодня рассмотрим такое свойство как content. Уверен многие frontend-разработчики используют его каждый день для псевдоэлементов. Ну как-то так:

Мало кто знает, что это свойство может принимать не только текст, но и attr(), counter(), url() и градиенты. А еще это свойство можно использовать и для обычных элементов. То есть мы можем поместить картинку внутрь псевдоэлемента или даже превратить <div /> в <img /> всего одной строчкой в CSS:

К сожалению градиенты не поддерживаются в Safari, поэтому не советую их использовать. А вот url() поддерживается всеми браузерами (даже IE8 !!!).

Еще можно указывать в content сразу несколько значений, но это работает только для псевдоэлементов:

На этом пока всё. Если зайдет, то буду писать еще. И не только про CSS.