How to style List Style Image items #20488

Yes, an <img> inside each <li> is valid semantic HTML. The ul and li elements still expose the list structure; the image is just decorative content inside each item. Give a decorative checkmark alt="" (and optionally aria-hidden="true") so a screen reader does not announce the same decoration for every item.

A simpler aligned version is:

<ul class="list-none space-y-2">
  <li class="flex items-start gap-2">
    <img src="/img/checkmark.png" alt="" class="mt-[0.35em] size-2 shrink-0" />
    <span>Item text</span>
  </li>
</ul>

The earlier pseudo-element version builds the same layout without an extra DOM element:

• list-none removes the browser marker.
• relative makes the <li> the positioning reference.
• pl-6 reserves horizontal room so text cannot overlap the icon.
• before:content-[''] creates an empty ::before box.
• before:absolute before:left-0 before:top-[0.35em] places that box in the reserved room and aligns it near the first text line.
• before:size-2 gives the box an explicit width and height.
• the before:bg-* utilities paint and scale the image inside that box.

The key distinction is that list-style-image gives the browser ownership of the marker's layout, so CSS cannot reliably size it as a normal element. Replacing it with an <img> or ::before creates a box that size-2 can control. Use <img> when the explicit markup is clearer; use ::before when the image is purely decorative and repeated consistently.