<p>伪元素 content 可响应式切换，但需确保媒体查询包裹完整伪元素选择器；用 data-* 属性 + attr() 可实现交互切换；SVG 替代 Unicode 更可靠；须设 display 和尺寸以保障点击热区。</p>
伪元素 content 值无法响应式切换？
直接写 content: "☰" 和 content: "✕" 在不同媒体查询里，但图标不切换——问题不在语法，而在 CSS 优先级和伪元素的“静态性”：content 属性本身支持媒体查询，但若多个规则匹配且权重相同，后声明的会覆盖前声明；更常见的是，你把 @media 写在了伪元素规则外部，导致内部 content 没被重新计算。
必须确保：媒体查询包裹的是完整的伪元素选择器，而不是只包 content 声明。
- ✅ 正确写法：
@media (max-width: 768px) { .nav-toggle::before { content: "☰"; } } @media (min-width: 769px) { .nav-toggle::before { content: "✕"; } } - ❌ 错误写法：
.nav-toggle::before { @media (max-width: 768px) { content: "☰"; /* 这样写无效，CSS 不支持嵌套 media */ } } - 注意：Unicode 字符需确保 HTML 文档编码为 UTF-8（
<meta charset="UTF-8">），否则可能显示为方块或问号
用 data-* 属性 + attr() 实现动态 content 切换
纯 CSS 无法根据交互状态（如点击展开）自动改 content，但可以借助 HTML 的 data- 属性 + attr() 函数，把状态“外挂”到元素上，再由 CSS 读取——这是真正可交互的方案。
- HTML 中初始设
data-state="closed"：<button class="nav-toggle" data-state="closed"></button>
- CSS 中用
attr()读取：.nav-toggle::before { content: attr(data-state) ""; /* 会输出 "closed "（注意空格）*/ } - JavaScript 控制状态变更：
toggleBtn.addEventListener("click", () => { const state = toggleBtn.dataset.state; toggleBtn.dataset.state = state === "closed" ? "open" : "closed"; }); - 配合 CSS 计数器或 Unicode 映射更实用：
.nav-toggle[data-state="closed"]::before { content: "☰"; } .nav-toggle[data-state="open"]::before { content: "✕"; }
SVG 图标替代 Unicode 的必要性
用 content: "☰" 看似简单，但实际项目中几乎一定会遇到缩放模糊、粗细不一致、颜色无法单独控制、高 DPI 下渲染异常等问题。SVG 作为伪元素背景或内联内容才是可靠解法。
立即学习“前端免费学习笔记（深入）”；
- 推荐方式：用
background-image配合background-size替代content，完全规避字符渲染缺陷：.nav-toggle::before { content: ""; display: inline-block; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z'/%3E%3C/svg%3E"); background-size: contain; } - 优势：可独立设置
background-color、filter: brightness()、响应式缩放不糊，且 SVG 路径可压缩进 URL（用工具转义） - 注意：URL 中的 SVG 必须手动 URI 编码，不能直接写
<svg>标签；未编码会导致解析失败，伪元素消失
移动端点击区域太小导致图标点不中
伪元素默认是 inline 级，width/height 不生效，且无点击热区。即使视觉上看到图标，手指点下去很可能没触发事件——这不是 JS 绑定问题，而是 CSS 盒模型没撑开。
- 必须显式设
display: inline-block或block，再配尺寸：.nav-toggle::before { display: inline-block; width: 44px; /* iOS 推荐最小点击区域 */ height: 44px; line-height: 44px; /* 垂直居中对齐用 */ text-align: center; } - 如果用 SVG
background-image，还需加background-repeat: no-repeat和background-position: center - 别依赖
font-size放大 Unicode 字符——它会破坏行高、溢出容器，且在 zoom=110% 时行为不可控
实际项目中最容易忽略的是：伪元素的点击热区与父元素事件委托的关系。比如 .nav-toggle 上绑了 click，但它的 ::before 没设 pointer-events: none，某些安卓浏览器会拦截事件，导致点击无响应。
