Adicionar ícone de imagem à esquerda do número da lista solicitada
Eu já sei como adicionar marcadores de imagem usando o CSSbackground-image
propriedade. O que estou tentando fazer agora é exibir um pequeno ícone gráfico à esquerda do número da linha em uma lista ordenada.
O problema que continuo enfrentando é que, ao tentar colocar o marcador de imagem, ele não aparece na tela. Percebo que ela está lá, empurrando a imagem ao longo do eixo X para a direita, para que eu não saiba o que não está sendo exibido corretamente.
Nota: Ipode faça com que o ícone apareça à direita do número, antes do texto, mas esse não é o resultado desejado.
Meu código.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>
O que eu já tenteiEu tentei configurartext-indent
, padding-left
, margin-left
, line-height
, Tudo em vão.
overflow: hidden
z-index
Minha perguntaIsso é possível com CSS puro e, se sim, o que estou fazendo de errado?