如何使用 CSS 伪元素动态切换复选框激活状态下的菜单图标（汉堡→关闭）-html教程-PHP中文网

如何使用 CSS 伪元素动态切换复选框激活状态下的菜单图标（汉堡→关闭）

本文讲解如何通过调整 HTML 元素顺序与合理使用 CSS 相邻/兄弟选择器（~），在纯 CSS 实现的响应式导航中，根据复选框 :checked 状态动态切换的 ::before 图标内容（如从 ☰ 切换为 ✕）。

本文讲解如何通过调整 html 元素顺序与合理使用 css 相邻/兄弟选择器（`~`），在纯 css 实现的响应式导航中，根据复选框 `:checked` 状态动态切换 `` 的 `::before` 图标内容（如从 ☰ 切换为 ✕）。

在纯 CSS 驱动的移动端侧边菜单（hamburger menu）中，一个常见需求是：当用户点击汉堡图标展开菜单后，图标应自动变为「关闭 ×」，直观反馈当前状态。但许多开发者会遇到 #toggle:checked ~ label::before 不生效的问题——根本原因在于 CSS 选择器的 DOM 遍历方向限制：~（通用兄弟选择器）只能匹配位于目标元素之后的同级兄弟元素，而原结构中 <label></label> 写在 <input id="toggle"> 之前，导致选择器无法定位。

✅ 正确解法是：将 <input id="toggle"> 移至 <label></label> 之前，确保其为 label 的前驱兄弟节点，从而让 #toggle:checked ~ label::before 成立：

<div class="main-nav">
  <input type="checkbox" id="toggle"><label for="toggle"></label>
  <nav class="menu"><!-- 菜单项 --></nav>
</div>

对应关键 CSS 如下（已适配 SCSS 嵌套语法）：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.main-nav {
  position: relative;

  nav a {
    display: block;
    border-bottom: 0.5px solid #000;
    padding: 1rem;
    text-decoration: none;
    color: #000;
    &:hover { background-color: #F7CC00; }
  }

  label {
    cursor: pointer;
    font-size: 1.5rem;
    padding-right: 1rem;
    &::before {
      content: "\2630"; // ☰ hamburger
      display: inline-block;
      transition: content 0.2s ease; // 可选：添加平滑过渡
    }
  }

  #toggle {
    display: none;
    &:checked {
      ~ .menu { display: block; }     // 显示菜单
      ~ label::before { content: "\2716"; } // ✕ close icon
    }
  }

  .menu {
    display: none;
    position: absolute;
    top: 62px;
    right: 0;
    background-color: #fff;
    width: 100vw;
  }
}

⚠️ 注意事项：

使用 ::before 时务必用双冒号（符合 CSS3 规范），避免与旧版 :before 混淆；
ASCII Unicode 符号需用 \ 转义（如 \2630），确保字体支持；也可改用更现代的 SVG 或字体图标提升兼容性；
若需视觉过渡效果，可对 label::before 添加 transition: content 0.2s（注意：部分浏览器对 content 过渡支持有限，实际中常配合 opacity 或 transform 辅助实现动画）；
该方案完全不依赖 JavaScript，语义清晰、性能轻量，适用于静态站点或渐进增强场景。