Игра с картинками

Вы можете поместить изображение в ::before и ::after, установив для свойства content значение url().

div::before {
  content: url(image.png);
}

Помните про объединение текста в content? Она также работает с изображениями! Вот пример, который объединяет изображение, строку и атрибут.

HTML

<div data-lives="3"></div>

CSS

div::before {
  content: url(mario.gif) ' × ' attr(data-lives);
}

See the Pen Mario Lives Screen by Will Boyd (@lonekorean) on CodePen.

Для вывода изображения не обязательно использовать свойство content. Другой вариант — воспользоваться background-image с псевдоэлементом соответствующего размера.

div::before {
  content: '';
  background-image: url(image.png);
  display: block;
  width: 100px;
  height: 100px;
}

Стоит отметить, что для ::before и ::after по умолчанию используется display: inline. Вам нужно изменить это значение, если хотите задать width и height, как показано в CSS выше.

Замена содержимого

Как вы уже заметили, ::before и ::after зависят от content. Они даже не будут отображаться, если content не задан. Но эта зависимость не является взаимной — есть ситуации, когда content можно использовать без ::before или ::after.

Если content задан только для одного изображения, то его можно применить непосредственно к элементу, чтобы заменить HTML-содержимое этого элемента.

.replace {
  content: url(replace.png);
}

Давайте попробуем это сделать на следующем HTML.

<span class="replace">This is text!</span>
<span class="replace"><img src="chicken-nugget.png" alt="chicken nugget"></span>
<img class="replace" src="chicken-nugget.png" alt="chicken nugget">

Данный HTML тестирует три варианта.

1. Элемент с простым текстом. Он будет заменён.
2. Элемент с <img> внутри. Его тоже заменят.
3. Непосредственно элемент <img>. Firefox не заменит его, но это сделают другие браузеры.

Убедитесь в этом сами!

See the Pen Content Replacement by Will Boyd (@lonekorean) on CodePen.

Поясним, что заменяется всё, что находится внутри элемента. Таким образом, вы можете заменить всю страницу изображением наггетса, сделав что-то вроде этого.

body {
  content: url(chicken-nugget.png);
}

Пожалуйста, используйте эту силу ответственно.