伪元素（::before/::after）仅能视觉修饰，无法驱动展开收起逻辑；真正控制需依赖可交互元素（如checkbox+label）或js事件，并配合aria属性确保语义与可访问性。
li标签本身不支持伪元素控制展开收起
直接用 ::before 或 ::after 给 li 添加“箭头”或“开关”视觉反馈，是常见做法；但想靠它驱动子菜单显示/隐藏——不行。li 没有状态（比如 :checked），伪元素也不能响应点击，更无法触发 CSS 选择器如 :hover ~ .submenu 的联动。
真正能驱动展开逻辑的，只有可交互元素：<input type="checkbox">、<details></details>，或者 JS 绑定的 click 事件。伪元素只是“画皮”，不是“开关”。
- 误以为加个
li::after { content: "▶"; }就能点开子菜单 → 实际点击无反应 - 在触摸设备上仅依赖
:hover+ 伪元素 → 手指悬停无效，子菜单永远不出现 - 用
li:focus-within::after模拟展开态 → 键盘焦点进入后图标变“▼”，但子菜单仍需额外 CSS 控制显隐，否则语义断裂
伪元素只能修饰，不能替代状态控制逻辑
你可以用伪元素增强可访问性，但必须配合真实状态源。比如：
✅ 正确组合：<input type="checkbox" id="menu-1"> + label[for="menu-1"]::after 显示箭头 + #menu-1:checked ~ .submenu 控制显示
❌ 错误写法：li:hover::after { content: "▼"; } 然后指望 li:hover .submenu 在手机上也生效 → 它不会
-
::before/::after可用于添加图标、编号、分隔线，但不能绑定事件或影响布局流中的“是否可见” - 若用
content插入 SVG 或 Unicode 符号（如"\25BC"），记得设display: inline-block避免换行错位 - 不要对伪元素设
pointer-events: none后又期望它响应点击 —— 它本来就不响应
嵌套菜单中伪元素缩进与层级标识要和 padding-left 同步
视觉层级靠的是 padding-left + border-left + 伪元素符号三者一致。只改伪元素内容不调缩进，会让人看不懂哪级是哪级。
例如二级菜单项前加 “»”，三级加 “‣”，但若所有 li 的 padding-left 都是 1.5rem，那符号再花哨也分不清父子关系。
- 一级：
li { padding-left: 1rem; }+li::before { content: "•"; } - 二级：
li ul li { padding-left: 2.5rem; }+li ul li::before { content: "»"; } - 三级：
li ul li ul li { padding-left: 4rem; }+li ul li ul li::before { content: "‣"; } - 别用
transform: translateX()移动伪元素来“模拟缩进” → 它会让:focus-visible框偏移，屏幕阅读器报告的位置也不准
伪元素在无障碍场景下几乎不可读
屏幕阅读器默认忽略 ::before 和 ::after 的 content，哪怕你写了 "展开" 或 "已折叠"。想让读屏软件感知状态变化，必须靠 ARIA 属性（如 aria-expanded）和真实交互控件。
- 用
<input type="checkbox">时，给对应ul.submenu加aria-hidden="true"，并在 JS 中同步切换aria-expanded值 - 纯 CSS 方案里，
:checked ~ .submenu可以配合[aria-expanded="false"]初始值，但切换仍需 JS 补全语义（否则刷新后读屏器不知道当前状态） - 千万别在伪元素里塞关键操作提示，比如
li::after { content: "(按空格键展开)"; }—— 用户根本听不到
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
