如何仅选中元素本身而非其伪元素？CSS汉堡菜单问题

我正在用纯CSS实现汉堡菜单的切换效果，目标是当复选框被勾选时，隐藏主<span>元素的线条，同时将其伪元素转换为叉形。但当前代码中，.menu-toggle:checked ~ .menu-toggle-label > span选择器设置的样式会连带影响伪元素，导致所有元素都被隐藏。请问如何仅选中<span>元素本身，而不影响它的伪元素？

提供的代码 #

HTML代码

<input type="checkbox" id="menu-toggle" class="menu-toggle">
<nav></nav>
<label class="menu-toggle-label" for="menu-toggle">
<span></span>
</label>

CSS代码

body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 3rem;
}

.menu-toggle-label span,
.menu-toggle-label span::before,
.menu-toggle-label span::after{
  width: 50px;
  height: 6px;
  position: relative;
  background-color: black; 
  display: block;
  transition: all 400ms ease-in-out;
}

.menu-toggle-label span::before,
.menu-toggle-label span::after {
  content: '';
  position: absolute;
}

.menu-toggle-label span::before {
  transform: translateY(-16px);
}

.menu-toggle-label span::after {
  transform: translateY(16px);
}

.menu-toggle:checked~.menu-toggle-label>span {
  transform: translateX(-50px);
  opacity: 0;
}
.menu-toggle:checked~.menu-toggle-label>span::before {
  transform: rotate(45deg) translate(35px, -35px);
}

.menu-toggle:checked~.menu-toggle-label>span::after {
  transform: rotate(-45deg) translate(35px, 35px);
}

解决方案 #

你遇到的问题根源是给勾选状态的<span>设置了opacity: 0——伪元素是<span>的生成内容，属于元素的一部分，会继承父元素的透明度属性，导致伪元素也跟着变透明。同时transform: translateX(-50px)会让整个<span>（包括伪元素）偏移，打乱叉形的位置。

要只隐藏主<span>的线条、保留伪元素，只需做两处修改：

1. 替换勾选状态下<span>的样式，用background-color: transparent隐藏主线条，而非opacity和偏移：

.menu-toggle:checked~.menu-toggle-label>span {
  background-color: transparent; /* 仅隐藏主线条，不影响伪元素 */
}

2. 调整伪元素的transform，让它们回到<span>中心并旋转成叉形：

.menu-toggle:checked~.menu-toggle-label>span::before {
  transform: translateY(0) rotate(45deg); /* 回到中心，顺时针转45度 */
}

.menu-toggle:checked~.menu-toggle-label>span::after {
  transform: translateY(0) rotate(-45deg); /* 回到中心，逆时针转45度 */
}

修改后的完整CSS代码 #

body{
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  gap: 3rem;
}

.menu-toggle-label span,
.menu-toggle-label span::before,
.menu-toggle-label span::after{
  width: 50px;
  height: 6px;
  position: relative;
  background-color: black; 
  display: block;
  transition: all 400ms ease-in-out;
}

.menu-toggle-label span::before,
.menu-toggle-label span::after {
  content: '';
  position: absolute;
}

.menu-toggle-label span::before {
  transform: translateY(-16px);
}

.menu-toggle-label span::after {
  transform: translateY(16px);
}

.menu-toggle:checked~.menu-toggle-label>span {
  background-color: transparent;
}
.menu-toggle:checked~.menu-toggle-label>span::before {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle:checked~.menu-toggle-label>span::after {
  transform: translateY(0) rotate(-45deg);
}

这样修改后，勾选复选框时，主线条会平滑消失，伪元素则过渡成标准的叉形，完全满足需求。

内容的提问来源于stack exchange，提问作者Vishal Kumar