css - How can I position image before each item in inline list?

Question

I'm attempting to create a inline list that display an image before each list item. Currently the image appears above the list item and not on the same line.

My aim is to get the image to appear to the left of the item, on the same line so it acts like a bullet/space between each item.

This is what my current attempt looks like ...

Markup:

    <ul class="list-inline">
      <li class="list-inline-item"><h4>Item One</h4></li>
      <li class="list-inline-item"><h4>Item Two</h4></li>
      <li class="list-inline-item"><h4>Item Three</h4></li>
    </ul>

Css:

ul li::before { 
content: url("~@/assets/asset-1.png");
display:inline-block
}

As you can see I'm currently using bootstrap 4 and it's classes to achieve the inline list.

question from:https://stackoverflow.com/questions/65927888/how-can-i-position-image-before-each-item-in-inline-list

Answer 1

You are missing the h4 definition in the css as Temani Afif stated above.

CSS:

ul li h4::before { 
  content: url("~@/assets/asset-1.png");
  display:inline-block
}

Alternatively, if you're interested - FlexBox makes this really easy and fun to do!

This site is really well put together and a great FlexBox reference: https://css-tricks.com/snippets/css/a-guide-to-flexbox/