为什么使用 :before 和 :after 而不是直接设置组件样式？

Question

我工作的公司有一个内部扩展的引导课程。我在使用他们提供的复选框时遇到困难，因此我必须深入研究他们的代码。我从这个 HTML 片段开始：

<div class="checkbox XXXbs-checkbox">                
    <label for="checkbox-id">Some Text</label>
    <input class="form-control" id="checkbox-id" name="checkbox-name" role="checkbox" type="checkbox" value="y">
</div>

他们的复选框 css 包含此内容（“XXX”代替了标识我工作的公司的字符串）：

.XXXbs-checkbox input[type=checkbox] {
    opacity: 0;
    margin-left: 4px;
    cursor: pointer;
    z-index: 1;
    width: 100%;
}

不透明度为 0，使上述 HTML 中的实际复选框不可见。同时，他们还有这样的：

.XXXbs-checkbox>label::before {
    font-family: XXX-icon;
    content: "\e903";
    font-size: 32px;
    position: absolute;
    top: -15px;
    left: 0;
}

在标签前放置一个空复选框，如下：

.XXXbs-checkbox>input[type=checkbox]:checked+label::before {
    content: "\e904";
    color: #000
}

渲染一个带有复选标记的框。

我的问题是，为什么要使用这种方法？为什么要在标签前面绘制一个假复选框，而不是仅设计实际复选框的样式？

Answer 1

为什么要在标签前面绘制一个假复选框，而不是仅设计实际复选框的样式？

因为您可以应用于复选框本身的样式数量非常非常有限。