SCSS自定义复选框图标:focus伪类不生效问题排查

更新：完整代码请见codepen

我的HTML代码如下：

<input id="id1" value="planner" type="checkbox" /> <label for="id1">Name</label>

我想在标签前插入自定义图标，编写了如下CSS代码：

input[type=checkbox] + label:before { 
  @include custom_square; 
  content:''; 
  display: inline-block;
}

自定义图标mixin代码：

@mixin custom_square { 
  width: 10px; 
  height: 10px; 
  border-radius:20%; 
  border:1px solid #0069aa; 
  margin-right:0.3rem; 
  &:focus::after { 
    border:1px solid #ffffff; 
  }
}

目前聚焦输入框时，关联标签文字可正常变色，对应CSS：

input[type=checkbox]:focus + label, input[type=radio]:focus + label {color: #fff;}

我希望聚焦时将方形图标的边框改为白色，已在mixin中添加&:focus::after但未生效，该如何解决？

注：不想使用font-awesome图标，自行创建图标插入。

问题核心是：&:focus::after是监听伪元素自身的焦点，但实际焦点落在<input>元素上，伪元素无法获得焦点，所以这个样式永远不会触发。

正确做法是通过<input>的:focus状态，直接修改相邻<label>的:before伪元素样式：

1. 移除mixin里无效的&:focus::after代码，修改后的mixin：

@mixin custom_square { 
  width: 10px; 
  height: 10px; 
  border-radius:20%; 
  border:1px solid #0069aa; 
  margin-right:0.3rem; 
}

2. 添加聚焦样式规则，关联input焦点到伪元素：

input[type=checkbox]:focus + label:before {
  border-color: #ffffff;
}

这样当<input>获得焦点时，就会同步修改标签前的自定义图标边框颜色为白色，和文字变色逻辑保持一致。

内容的提问来源于stack exchange，提问作者angularguy