Добавить значок изображения слева от упорядоченного номера списка
Я уже знаю, как добавить изображение пуль с помощью CSSbackground-image
имущество. То, что я сейчас пытаюсь сделать, это отобразить маленький графический значок слева от номера строки в упорядоченном списке.
Проблема, с которой я продолжаю сталкиваться, заключается в том, что при попытке поместить изображение маркера оно не отображается на экране. Я могу видеть, что это там, подталкивая изображение вдоль оси X вправо, поэтому я не знаю, что это отображает неправильно.
Примечание: яМожно заставить значок появляться справа от числа перед текстом, но это не желаемый результат.
Мой код.action-item {
background-image: url(https://cdn0.iconfinder.com/data/icons/clipboard-1/100/clipboard-10-512.png);
background-position: -4px 2px;
background-repeat: no-repeat;
line-height: 1.5;
background-size: 1.4em;
list-style: none;
margin-left: 0;
padding-left: 0;
text-indent: 1.4em;
}
<ol>
<li class="action-item">item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="action-item">item 4</li>
<li class="action-item">item 5</li>
<li>item 6</li>
</ol>
Что я уже пробовалЯ пробовал настраиватьtext-indent
, padding-left
, margin-left
, line-height
все безрезультатно.
overflow: hidden
z-index
Мой вопросВозможно ли это с чистым CSS, и если да, что я делаю не так?