在HTML/CSS中的行项后追加多个图像

Question

这是我的数据：

<ol>
    <li class="us">apple pie</li>
    <li class="ca">maple syrup</li>
    <li class="us ca">cheeseburger</li>
</ol>

我想要的是苹果派，然后是美国国旗(我有)，枫树糖浆，然后是加拿大国旗，奶酪汉堡，然后是美国国旗，然后是加拿大国旗。

我怎样才能用CSS做到这一点呢？

Answer 1

这里有一种方法，您可以这样做，但它只能支持最多2个标志。

​

ol li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

ol li[class]::before,
ol li[class]::after {
  display: block;
  width: 16px;
  height: 16px;
  order: -1;
  margin-right: 4px;
}

.us::before {
  content: '';
  background-image: url(https://www.flaticon.com/svg/static/icons/svg/197/197484.svg);
}

.ca::after {
  content: '';
  background-image: url(https://www.flaticon.com/svg/static/icons/svg/197/197430.svg);
}

<ol>
    <li class="us">apple pie</li>
    <li class="ca">maple syrup</li>
    <li class="us ca">cheeseburger</li>
</ol>

​

如果您愿意添加两个以上的标志，最好这样做：

<ol>
    <li><i class="us"></i>apple pie</li>
    <li><i class="ca"></i>maple syrup</li>
    <li><i class="us"></i><i class="ca"></i>cheeseburger</li>
    <li><i class="us"></i><i class="ca"></i><i class="uk"></i>pizza</li>
</ol>

​

ol li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

i {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

i.us {
  background-image: url(https://www.flaticon.com/svg/static/icons/svg/197/197484.svg);
}

i.ca {
  background-image: url(https://www.flaticon.com/svg/static/icons/svg/197/197430.svg);
}

i.uk {
  background-image: url(https://www.flaticon.com/svg/static/icons/svg/197/197374.svg);
}

<ol>
    <li><i class="us"></i>apple pie</li>
    <li><i class="ca"></i>maple syrup</li>
    <li><i class="us"></i><i class="ca"></i>cheeseburger</li>
    <li><i class="us"></i><i class="ca"></i><i class="uk"></i>pizza</li>
</ol>

​

Answer 2

如果你知道::after伪元素的话就不会那么痛苦了-

li::after {
  content: url('...');   //add path to the img
  //you can also add other properties to pseudo elements just like others elements
  margin-left: 5px;
}

Docs- https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

编辑1-

现在，您需要的另一件事是在第三个列表项中使用多个图像。content属性是不可能的，但是在这种情况下，可以使用background属性-

li:nth-child(3) {
  background: url('...img1') url('...img2');
}

为了将图像分开，你可以进一步指定背景位置-

li:nth-child(3) {
  background: url('...img1') left center url('...img2') right center no-repeat;
}