I am working on creating an inline list that shows an image before each list item. However, I am facing an issue where the image appears above the list item instead of being on the same line.
My goal is to have the image displayed to the left of each item, in line with the text so it acts like a bullet or space between items.
Here is what my current attempt looks like ... https://i.sstatic.net/Ncn1q.png
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
}
Currently, I am utilizing Bootstrap 4 and its classes to create this inline list.