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

考虑到你的标记，你需要稍微调整一下。这样的事情会起作用还是你完全无法调整你的标记？

HTML（第2行到最后一行）

List this item privately for <i class="icon"></i>$3.00 </label>

<强> CSS

.icon:after {
    content: url('image.png');
}

Answer 2

您可以使用: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>

在文本之前放置图像

2 个答案: