I want to replace bullets with images but I can't position them properly. I was doing the following:
.list-item::before {
background: url(../myimg.png);
background-size: contain;
content: '';
display: inline-block;
width: 1.5em;
height: 1.5em;
margin: 0 1.5em -0.5em 0;
}
Which kind of worked until I realized when my li contains more than a line of text the text on the second line goes up to the left of the image of course because it's inline-block, which I don't want (see: https://ibb.co/GkrHhqC).
What I want is something like this (see: https://ibb.co/wJ5ktQc). Except to do that I used
.list-item::before {
content: '';
display: block;
position: absolute;
width: 1.5em;
height: 1.5em;
margin: 0 1.5em -0.5em 0;
left: 1em;
}
Except it's cheating because the left means nothing. I'd like to position an absolute block, but relative to the left of my text. Is there a way to do that?