答案是使用CSS的:checked与::after可实现无JS的图标切换，通过隐藏输入框，利用label的伪元素绘制三线图标，选中时用transform和box-shadow变化为叉形。
使用 CSS 的 :checked 与 ::after 可以在用户点击复选框或单选按钮时实现图标的切换效果，常用于自定义开关、菜单图标（如汉堡变叉）等场景。核心思路是隐藏默认的输入框，用伪元素展示自定义图标，并根据选中状态改变样式。
1. 基本结构准备
先创建一个带 ID 关联的 checkbox 输入框和一个用于显示图标的标签：
这个 label 将作为图标的载体，通过 CSS 控制其 ::after 伪元素来显示不同图形。
2. 隐藏默认输入框并设置图标容器
隐藏 input 并为 label 设置基本样式，使其成为一个可点击的图标区域：
立即学习“前端免费学习笔记（深入）”；
#toggle-icon { display: none;}label { display: block; width: 24px; height: 24px; position: relative; cursor: pointer;}
3. 使用 ::after 定义默认图标（如“—”）
通过伪元素绘制一个简单的三线图标（类似汉堡菜单）：
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 
label::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; height: 2px; background: #000; box-shadow: 0 6px 0 #000, 0 -6px 0 #000; transition: all 0.3s ease;}
这里用 background 和 box-shadow 绘出三条横线。
4. 切换状态：利用 :checked 改变 ::after 样式
当 checkbox 被选中时，让图标变为“×”形状：
#toggle-icon:checked + label::after { background: transparent; box-shadow: none; transform: translate(-50%, -50%) rotate(45deg); width: 80%; height: 2px;}#toggle-icon:checked + label::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 80%; height: 2px; background: #000; z-index: -1;}
因为 ::after 已被占用，可以添加 ::before 来画第二条斜线，组成“×”。未选中时只显示三横，选中后三横消失，两条斜线出现。
5. 添加动画更流畅
加上过渡效果让切换更自然：
label::after,label::before { transition: all 0.3s ease;}
基本上就这些。通过控制伪元素的 content、transform、background 等属性，配合 :checked 状态，就能实现无 JavaScript 的图标切换。
以上就是如何用css :checked与::after实现切换图标效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1015341.html
微信扫一扫 
支付宝扫一扫 
