Wie kann ich verhindern, dass der umgebrochene Text im li unter dem list icon erscheint?

[Matthias]

Hallo,

ich habe eine Liste mit Bild-Icon als Aufzählungszeichen. Wenn der Text umgebrochen wird, beginnt die neue Zeile direkt unter dem Bild-Icon statt unter dem Beginn der darüberliegenden Zeile.

<div style="background-color: #EDEEF2; padding: 2%; margin-right: 20%;"> <ul style="list-style-image: url('http://xxxxxxxxxxxxx.com/wp-content/uploads/2020/11/538755xxx.png'); list-style-position: inside; font-size: 17px;display: block; "> <li>loremipsum <span style="background-color: #FFFF00">loremipsum <strong>loremipsum </strong>loremipsum </span> <span style="color: #AF0303"><strong>( loremipsum )</span> </strong><br></li> <li style="margin: 10px 0;">loremipsum <span style="color: #AF0303"><strong>loremipsum </strong></span><br></li> <li style="margin: 10px 0;">Live <i>loremipsum </i> loremipsum <span style="color: #AF0303"><strong>loremipsum </strong></span><br></li> <li style="margin: 10px 0;"><span style="background-color: #FFFF00"><strong>loremipsum </strong></span> - loremipsum <span style="color: #AF0303"><strong>(loremipsum ) </strong></span><br></li> </ul> </div>

Wie muss/kann ich den Code anpassen?

Danke