Не вставляется картинка перед списком через ::before

Question

Я совсем новичок, не могу найти ошибку в коде.
Не получается увидеть изображение, которое я пытаюсь подвязать через ::before перед пунктами списка.
Картинка в коде распознается (проверила через f12, браузер ее видит). Проблема в том, что никак не получается задать ::before высоту - ширина меняется, а высота ни в какую.

Не помогли ни разные единицы измерения, ни transform, ни overflow, ни манипуляции с background-size, ни смена самой картинки на большой/маленький размер или на png.
Валидатор ошибок не нашел.
Нужно именно через псевдоэлемент. Хеелп!!

<ul class="list">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
</ul>

.list li{
    margin: 0 0 10px 0px;
    max-width: 300px;
    min-height: 20px;
}
.list li::before{
    content: '';
    display: block;
    background: url('../img/icon2.svg') 0 0/20px 20px no-repeat;
    overflow: visible;
}

Answer 1

display:flex для <li>, чтобы стояли в ряд, а у псевдоэлемента явно задать ширину и высоту

.list li{
    margin: 0 0 10px 0px;
    max-width: 300px;
    min-height: 20px;
    display: flex;
}
.list li::before{
    content: '';
    display: block;
    background: url('../img/icon2.svg') 0 0/20px 20px no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

<ul class="list">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Lorem ipsum dolor sit amet.</li>
</ul>

БЛОГ НА HUSL

Не вставляется картинка перед списком через ::before

Ответы (1 шт):