Question

我有这个复选框：

正如您所看到的，当它被选中时，文本显示在框内，一切看起来都没问题。但是一旦你点击它取消选中它，框的内容就会消失（好事），但是Description正在关闭。如何防止此文本出现故障？

Answer 1

将vertical-align: bottom;添加到伪元素是一种方式 - vertical-align中元素的默认inline formatting context值为baseline，当文本消失时，它会改变它的位置基于文本的基线。

.form input[type="checkbox"] ~ label span:before {
    vertical-align: bottom;
}