如何使用 CSS 在定义的空间中放置可变数量的图像？

Question

Here is a picture of what I am trying to accomplish:

I want to have various lines of text, probably in a <p> , with a variable number of images in front (up to 3, with two variations each, empty circles and filled dots, as shown). Each item can have zero to three images. If showing, blue is always on the left, green in the middle and yellow on the right.

I tried putting the images as a background-image within a span , but could not figure out how to make the margins/padding to work in this variable condition.

<style>
  p { display: block; }
  span { padding: 0 36px; display: inline-block; vertical-align: middle; }
  .outlineS { padding: 10px 12px; background-image: url('img/circle-blue.png'); background-repeat: no-repeat; }
  .outlineD { padding: 10px 12px; background-image: url('img/dot-blue.png'); background-repeat: no-repeat; }
  .graphicS { padding: 10px 12px; background-image: url('img/circle-green.png'); background-repeat: no-repeat; }
  .graphicD { padding: 10px 12px; background-image: url('img/dot-green.png'); background-repeat: no-repeat; }
  .textS { padding: 10px 12px; background-image: url('img/circle-yellow.png'); background-repeat: no-repeat; }
  .textD { padding: 10px 12px; background-image: url('img/dot-yellow.png'); background-repeat: no-repeat; }
</style>

<p><span class="outlineS"></span><span class="graphicD"></span><span class="textS"></span>Item 1</p>
<p><span class="outlineS"></span>Item 2</p>
<p><span class="graphicS">Item 3</p>
<p>Item 4</p>

I am sure I could create a bunch of little span fillers to put wherever I don't want an image, but at some point it is just creating a lot of messy code for something that seems like it should be more simple.

All ideas are welcome, including using other forms of tags besides the current <p> / <span> approach.

Answer 1

@Thomas I added the fixed result, hope it is helpful for you~

 p { padding-left: 90px; position: relative; } p > span { width: 14px; height: 14px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; display: inline-block; box-sizing: border-box; border-width: 3px; border-style: solid; } p > span.empty { background-color: transparent; } .outlineS { left: 0; background-color: blue; border-color: blue; } .graphicS { left: 30px; background-color: green; border-color: green; } .textS { left: 60px; background-color: yellow; border-color: yellow; }

 <p><span class="outlineS"></span><span class="graphicS empty"></span><span class="textS"></span>Item 1</p> <p><span class="outlineS"></span>Item 2</p> <p><span class="graphicS"></span>Item 3</p> <p>Item 4</p>

Answer 2

Done using display: grid; and CSS variables for the color

 body { font-family: sans-serif; margin: 0 } * { box-sizing: border-box } p { display: grid; grid-template-columns: 20px 20px 20px 1fr; grid-template-rows: 1fr; } p .outlineS, p .outlineO { grid-column-start: 1; grid-column-end: 2; } p .graphicS, p .graphicO { grid-column-start: 2; grid-column-end: 3; } p .textS, p .textO { grid-column-start: 3; grid-column-end: 4; } P span:last-child { grid-column-start: 4; grid-column-end: 5; margin-left: 0.5rem; } p span:not(:last-child) { height: 20px } p span:not(:last-child)::before { background-color: var(--background); border: 2px solid var(--border); border-radius: 100%; content: ''; display: block; height: 10px; width: 10px; transform: translate(2.5px, 2.5px); } .outlineS::before { --background: blue; --border: blue; } .outlineO::before { --background: transparent; --border: blue; } .graphicS::before { --background: green; --border: green; } .graphicO::before { --background: transparent; --border: green; } .textS::before { --background: yellow; --border: yellow; } .textO::before { --background: transparent; --border: yellow; }

 <p> <span class="outlineS"></span> <span class="graphicO"></span> <span class="textS"></span> <span>Item 1</span> </p> <p> <span class="outlineS"></span> <span>Item 2</span> </p> <p> <span class="graphicS"></span> <span>Item 3</span> </p> <p> <span>Item 4</span> </p>