html - CSS - 选择器 - 复选框和标签之间的额外内容

Question

我有以下 html 设置:

<fieldset>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="movie"> Movies</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="music"> Music</label>
  </div>
  <div class="checkbox">
    <label class="justlabel"><input type="checkbox" value="books"> Books</label>
  </div>
</fieldset>

这是我的 fiddle :https://jsfiddle.net/z7aymz5a/20/

我根据每个复选框的值来定位每个复选框，因为所有类别都相同。

我想要实现的是在每个复选框后面放置一个彩色圆圈，就在标签之前，如下图所示

我已经把圆圈放进去了，但我就是不知道如何正确设置它的样式，所以它位于复选框之后但标签之前。

谁能帮我解决这个问题？

Answer 1

不接触 html 并正确定位

    input {
        margin-right: 20px;
    }

    input::after {
        content: "\25CF";
        font-size: 30px;
        position: relative;
        top: -12px;
        right: -16px;
    }
    input[value="movie"]::after {
        color: red;
    }

    input[value="music"]::after {
        color: blue;
    }

    input[value="books"]::after {
        color: green;
    }