带有焦点的scss mixin：带有焦点的mixin不起作用

Question

更新：这里是完整的代码： 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;}

另外，我想在焦点上将正方形的边框颜色更改为white ，我&:focus::after pseudo element in the mixin custom_square但它似乎不起作用，有什么线索吗？

PS：我不想使用字体很棒的图标，而是创建自己的图标并插入，如上所示：