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

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!

CodePudding user response：

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;
    }

CodePudding user response：

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.