本文详解如何通过 CSS 伪元素（::before）为隐藏原生复选框的自定义容器添加勾选标记“X”，解决 content 属性无法直接作用于普通元素的常见误区，并提供可立即运行的完整示例。
本文详解如何通过 css 伪元素（::before）为隐藏原生复选框的自定义容器添加勾选标记“x”，解决 `content` 属性无法直接作用于普通元素的常见误区，并提供可立即运行的完整示例。
要实现“点击后显示 X”的自定义复选框，核心在于正确使用 CSS 的 ::before 伪元素 —— 因为 content 属性仅对伪元素生效（如 ::before 或 ::after），不能直接设置在普通 HTML 元素上（如 .custom-checkbox）。你当前代码中：
input[type="checkbox"]:checked + .custom-checkbox {
content: 'X' !important; /* ❌ 无效：.custom-checkbox 是真实元素，不支持 content */
}
这段规则不会渲染任何内容，导致“X”始终不出现。
✅ 正确做法是：将 content 应用于 .custom-checkbox::before，并确保该伪元素具备可显示的尺寸与定位：
✅ 修正后的完整 CSS（推荐）
.checkbox-row {
font-size: 6.0pt;
line-height: 115%;
font-family: "Times New Roman", serif;
color: #1F1F1F;
}
input[type="checkbox"] {
display: none; /* 隐藏原生复选框 */
}
.custom-checkbox {
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #000;
position: relative; /* 为伪元素提供定位上下文 */
margin-right: 4px;
vertical-align: middle;
}
/* 关键修复：使用 ::before 伪元素显示 'X' */
.custom-checkbox::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 14px;
text-align: center;
color: #000;
opacity: 0;
transition: opacity 0.15s ease;
}
input[type="checkbox"]:checked + .custom-checkbox::before {
content: 'X';
opacity: 1;
}
✅ 对应 HTML（保持结构，仅微调语义与空格）
<div class="checkbox-row">
<label>
<input type="checkbox" name="area" value="rural" th:checked="${flag}"><span class="custom-checkbox"></span>
Rural
</label>
<label>
<input type="checkbox" name="area" value="semi-urban" th:checked="${customer.getActive()}"><span class="custom-checkbox"></span>
Semi urban
</label>
<label>
<input type="checkbox" name="area" value="urban" th:checked="${!flag}"><span class="custom-checkbox"></span>
Urban
</label>
</div>
? 注意事项：
- th:checked 是 Thymeleaf 模板语法，确保后端变量 flag 和 customer.getActive() 返回布尔值；
- 伪元素 ::before 必须配合 content 才能渲染，且需设置 position: absolute + 尺寸/定位，否则可能不可见；
- 使用 opacity 而非 display: none 实现淡入效果，更平滑；若需更高兼容性（如 IE），可用 visibility: hidden/visible 替代；
- 建议为所有复选框设置 name 属性，便于表单提交时统一收集数据。
通过以上调整，点击复选框即可清晰显示居中、加粗的黑色“X”，样式可控、语义规范、兼容主流浏览器。此方案是现代 Web 表单定制的通用实践，适用于各类 CMS 或 Java Web 框架（如 Spring Boot + Thymeleaf）。
