css - 将图像放在文本之前

Question

我有以下标记:

<div class="md-checkbox" style="color: white;">
    <input type="checkbox" name="private" class="md-check" id="checkbox2">
    <label for="checkbox2">
    <span class="inc"></span>
    <span class="check"></span>
    <span class="box"></span>
    List this item privately for $3.00 </label>
</div>

我想在“$3.00”文本之前放置一个小图像(图标)。我试过创建自定义类并使用跨度，但这没有用。有人可以指出我正确的方向吗？

Answer 1

您可以使用 :last-of-type伪类选择器，以及 ::after伪元素选择器在最后一个 <span> 之后添加内容在 .md-checkbox 内分类元素(你的 div ...)。内容基本上是您需要的任何内容:

.md-checkbox span:last-of-type::after {
  content: "*"
}

<div class="md-checkbox">
    <input type="checkbox" name="private" class="md-check" id="checkbox2">
    <label for="checkbox2">
    <span class="inc"></span>
    <span class="check"></span>
    <span class="box"></span>
    List this item privately for $3.00 </label>
</div>