如何通过CSS的:valid伪类和::after伪元素实现原生表单校验勾选框的显示？

本文共计1027个文字，预计阅读时间需要5分钟。

因为 ` ::after` 伪元素只能作用于可生成内容的元素，而 `` 元素不是可生成内容的元素，所以无法使用。

绕过限制：用 label 包裹 input + 定位伪元素

核心思路是把 ::after 挂在 label 上，再用属性选择器联动 input:valid 的状态。需要确保 label 和 input 绑定（for/id 或嵌套），且 label 是普通块级容器。