I need help with customizing the bullet background-image for an <li> element. I want the text in the bullet to be displayed outside the marker using the CSS property list-item-position: outside. However, my current implementation doesn't seem to be working as expected. The second line of text still starts at the beginning of the container, under the image. Here is the HTML code I'm using:
<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>
Here is the corresponding CSS:
.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;
}
When the screen size is reduced and the text overflows to the next line, it starts below the image rather than where I want it to be. Can anyone provide a solution to this issue? Thank you!