Не работает картинка через псевдоэлемент бефор?

Question

[dazzy8]

https://jsfiddle.net/puv0w6mc/18/
Почему

Answer 1

[0xD34F]

Всё работает.

Ширина у ::before нулевая, поэтому картинки не видно.

Comments

[dazzy8]

А как ее наполнить? Обязательно в контент что то писать? А если ничего кроме картинки у меня в целях нет?

[0xD34F]

dazzy8,

display: inline-block;
width: 20px;
height: 20px;

Answer 2

[Роман]

Добавив content вы добавили сам элемент, но его параметры отображения еще не настроили.
По умолчанию, у псевдоэлементов, такие параметры:

::before {
  display: inline;    /*строка*/
  width: auto;
  height: auto;
}

Соответственно, чтобы ваш элемент было видно, ему нужно прописать такие параметры:

li:before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  vertical-align: middle;
}