响应式移动端三层汉堡菜单仅显示单条横线问题排查

伪元素配置异常 #

• 三层汉堡图标通常由元素本身加::before、::after两个伪元素实现，首先检查两个伪元素是否设置了content: ''，未声明content的伪元素不会被渲染
• 检查伪元素的background-color、height属性是否正常配置，避免出现颜色透明、高度为0的无效配置
• 检查伪元素的position偏移量是否合理，偏移量过大会导致线条超出可视区域无法显示

媒体查询规则冲突 #

• 检查响应式断点的样式覆盖逻辑，确认在移动端视口下没有将::before、::after设置为display: none
• 检查汉堡图标容器的overflow属性是否被设置为hidden，如果另外两条线条的位置超出容器高度会被裁切，仅能看到中间的单条横线

布局属性冲突 #

• 检查是否有全局样式重置了::before、::after的默认属性，未针对汉堡图标做单独适配
• 检查三条横线的布局属性是否被覆盖导致重叠，float、flex属性的异常配置会导致三条线堆叠在同一位置，视觉上仅显示一条

快速验证方法 #

打开浏览器开发者工具的元素面板，选中汉堡图标元素，查看其::before、::after伪元素的样式计算结果，即可快速定位是渲染异常还是位置偏移问题。

内容的提问来源于stack exchange，提问作者Arashjot Kaur