Second line in <li> on the same position as first line - html

Question

I've got an <li> with a custom bullet background-image. Now, I'd like to have the text in the bullet be outside the marker, using the list-item-position: outside in CSS. However, it does not seem to be working. The second line still starts at the start of the container (under the image). My html looks like this:
<ul className={styles.missieTxt}>
<li className={styles.bulletsMissie}>
... lorem ipsum lorem ipsum lorem, {" "}
<span className={styles.focusMissie}>100% </span>lorem
</li>
<li className={styles.bulletsMissie}>
... lorem ipsum <span className={styles.focusMissie}>lorem</span>
, lorem ipsum lorem ipsum
</li>
<li className={styles.bulletsMissie}>
... <span className={styles.focusMissie}>lorem</span> lorem ipsum
<span className={styles.focusMissie}>lorem</span>
</li>
</ul>
the css for this looks like this:
.missieTxt {
display: flex;
flex-direction: column;
}
.bulletsMissie {
list-style-type: none;
position: relative;
font-size: clamp(0.8rem, 1.3vw, 1.5rem);
margin-right: 1rem;
list-style-position: outside;
}
.bulletsMissie::before {
content: "";
display: inline-flex;
height: 20px;
width: clamp(25px, 3vw, 48px);
background-image: url(../images/overOns/bulletsImg.png);
background-repeat: no-repeat;
background-size: 100%;
align-items: center;
margin-right: 0.5rem;
}
.focusMissie {
color: #78c0a8;
font-weight: bold;
}
If screens are smaller, and the text overflows to the second line, it just starts under the image, which I do not want. Does anyone have a solution to this? :(
Thank you in advance!

Answer 1

Try this and see if it works.
.missieTxt {
display: flex;
flex-direction: column;
}
.bulletsMissie {
list-style-type: none;
position: relative;
font-size: clamp(0.8rem, 1.3vw, 1.5rem);
margin-right: 1rem;
list-style-position: outside;
display: block;
padding-left: clamp(25px, 3vw, 48px);
}
.bulletsMissie::before {
content: "";
display: block;
position: absolute;
left: 0;
top: 0;
height: 20px;
width: clamp(25px, 3vw, 48px);
background-image: url(../images/overOns/bulletsImg.png);
background-repeat: no-repeat;
background-size: 100%;
}
.focusMissie {
color: #78c0a8;
font-weight: bold;
}

Answer 2

you might want to consider changing: list-style-type: none;
in .bulletsMissie
to list-style-image: url(../images/overOns/bulletsImg.png);
and the list-item-position: outside, will work.