自定义复选框点击后无法显示X符号问题求助

问题场景 #

需要制作包含多个自定义复选框的表单，要求点击复选框后框内显示X符号。目前已完成基础样式，但选中状态下X符号无法显示，仅背景色（若设置）功能正常。

原CSS代码：

.checkbox-row {
font-size:6.0pt;line-height:115%;font-family:
"Times New Roman",serif;color:#1F1F1F;
display:inline-block;
}

 input[type="checkbox"] {
      display: none;
    }

    .custom-checkbox {
      width: 7px;
height:7px;
      border: 0.5px solid #000;
      cursor: pointer;
 font-size: 14px;
    box-sizing: border-box;

display:inline-block;
    }

    input[type="checkbox"]:checked + .custom-checkbox {
     content: 'X' !important;
      font-size: 14px !important;
      color: black;

      text-align: center;
      line-height: 7px;
    }

原HTML代码：

<div class="checkbox-row">
                <label>
                    <input type="checkbox" th:checked="${flag}"/> <span class="custom-checkbox"></span>
                    Rural 
                </label>
                <label>
                    <input type="checkbox" th:checked="${customer.getActive()}"/> <span class="custom-checkbox">  </span>
Semi urban
                </label>
                 <label>
                    <input type="checkbox" th:checked="${flag ? false: true}"/> <span class="custom-checkbox">  </span>
 Urban
                </label>
<br>
    </div>

问题原因 #

content 属性仅能作用于伪元素（::before / ::after），直接给 <span> 这类普通元素设置 content 不会生效，这就是选中时X符号无法显示的核心原因。

修复代码 #

修改CSS部分，通过伪元素实现X符号的显示：

.checkbox-row {
font-size:6.0pt;line-height:115%;font-family:
"Times New Roman",serif;color:#1F1F1F;
display:inline-block;
}

input[type="checkbox"] {
    display: none;
}

.custom-checkbox {
    width: 7px;
    height:7px;
    border: 0.5px solid #000;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
    display:inline-block;
    /* 为伪元素定位提供基准 */
    position: relative;
}

/* 给自定义复选框添加伪元素，默认隐藏 */
.custom-checkbox::after {
    content: 'X';
    font-size: 14px;
    color: black;
    text-align: center;
    line-height: 7px;
    /* 定位到复选框中心 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 默认隐藏 */
    display: none;
}

/* 复选框选中时，显示伪元素 */
input[type="checkbox"]:checked + .custom-checkbox::after {
    display: block;
}

HTML代码无需修改，保持原样即可。

说明 #

• 通过给 .custom-checkbox 添加 ::after 伪元素，承载X符号的内容；
• 利用绝对定位和 transform 让X符号精准居中于复选框内；
• 复选框未选中时隐藏伪元素，选中时通过 display: block 显示X符号。

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