:checked + label::after动画不动的最常见原因是结构错误——input必须与label为同级兄弟元素且位于其前，而非嵌套在label内；正确写法是input与label并列或input置于label内部但用伪元素直接控制。
为什么:checked + label::after动画不动？
最常见原因是结构没对齐——input必须和目标元素（比如label::after）在同一个父容器下，且input得在label前面。如果写成<label><input></label>，那input:checked + label::after根本选不到，因为+只认“紧挨着的下一个兄弟”，而input此时是label的子元素，不是兄弟。
正确结构只有两种稳定写法：
-
<input type="checkbox" id="agree"><label for="agree">我已阅读并同意</label>→ 用+选label -
<label><input type="checkbox">我已阅读并同意</label>→ 用input:checked + ::after或直接控制label::after
浏览器开发者工具里点一下input，看:checked有没有实时加到元素上；没加，说明点击没触发状态切换——大概率是label没包住input，或者for/id不匹配。
怎样用position + transform画出勾选对号？
纯CSS画对号，靠的是::after伪元素+border裁剪+transform: rotate()。不能直接画斜线，但可以用两段带边框的矩形拼出来：一段竖，一段横，再旋转45°叠成“√”。
关键参数要抠准：
-
border-width: 0 0 3px 3px只留左、下边框，形成L形 -
transform: rotate(-45deg)让L形转成对角线交叉点 -
top: 50%; left: 50%; margin-top: -Xpx; margin-left: -Ypx必须手动居中，因为旋转后原点偏移了 - 初始
transform: scaleX(0) rotate(-45deg)，选中时变scaleX(1)，比直接opacity更锐利
别用display: none隐藏原生input——它会断掉可访问性。稳妥写法：.hidden-checkbox { position: absolute; opacity: 0; pointer-events: none; }
transition写哪些属性才真正生效？
transition不是万能的。给display、visibility、height（非0→auto）加过渡，动画根本不会动，浏览器直接跳变。
勾选动画真正能平滑过渡的属性就这几个：
-
transform（位移/缩放/旋转）——性能最好，推荐首选 -
opacity——适合淡入淡出 -
background-color、border-color——适合颜色反馈
写法上别偷懒用transition: all 0.3s。比如input:checked + label::after只改transform，那就明确写transition: transform 0.25s ease，避免意外触发动画卡顿。
移动端点击没反应或延迟怎么办？
iOS Safari 默认有300ms点击延迟，尤其当label是纯视觉区域时。解决方法很简单：
- 给
label加touch-action: manipulation，告诉浏览器“这是操作控件，别等双击” - 确保
label有足够点击热区（至少44×44px），别让伪元素太小又没撑开容器 - 别在
label上同时写:hover和:checked动画——iOS下:hover可能误触发
最后提醒一句：所有动画效果都依赖于input真实存在且可交互。删掉input只留label，或者用appearance: none却不配opacity: 0，都会导致状态丢失——看起来动了，其实表单根本没提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
