React按钮组::after伪元素滑动动画显示/位置异常求助

我需要实现按钮组的切换效果：对应按钮active时显示红色背景+白色文字，但当前代码存在两个问题：

• 点击「6 months」时，伪元素位置不对，无法覆盖第一个按钮的背景
• 点击「12 months」时，伪元素完全没移动到正确位置

原React组件代码 #

import { useState } from "react";

export default function App() {
  const [timeline, setTimeline] = useState(12);
  return (
      <div className="multi-button-group">
        <button
          className={timeline === 6 ? "active" : ""}
          onClick={() => setTimeline(6)}
        >
          6 months
        </button>
        <button
          className={timeline === 12 ? "active" : ""}
          onClick={() => setTimeline(12)}
        >
          12 months
        </button>
      </div>
  );
}

原CSS的问题点 #

1. 仅给最后一个按钮添加::after伪元素，导致选中第一个按钮时，伪元素只能在第二个按钮区域显示，覆盖不到第一个按钮的背景
2. 用~兄弟选择器的逻辑错误：第二个按钮是active时，button.active:nth-child(2) ~ button没有匹配的元素，伪元素根本不会移动
3. 伪元素属于最后一个按钮，没法跨越按钮边界覆盖第一个按钮的区域

修改后的CSS代码（完美适配两种初始选中状态） #

*, *::before, *::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.multi-button-group {
  position: relative;
  display: inline-block; /* 让容器自适应按钮宽度 */
}

/* 把滑动背景放在容器上，统一控制 */
.multi-button-group::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%; /* 两个按钮各占一半宽度 */
  background-color: red;
  border-radius: 12px;
  transition: left 0.5s ease;
  z-index: 0;
}

/* 第一个按钮active时，背景滑块停在左侧 */
.multi-button-group .active:first-child ~ ::after {
  left: 0;
}

/* 第二个按钮active时，背景滑块移到右侧 */
.multi-button-group .active:nth-child(2) ~ ::after {
  left: 50%;
}

/* 按钮基础样式 */
.multi-button-group button {
  border: 1px solid black;
  background: transparent;
  color: black;
  padding: 10px 20px;
  position: relative;
  z-index: 1; /* 确保按钮文字、边框在背景上方 */
}

.multi-button-group button:first-of-type {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-right: none;
}

.multi-button-group button:last-of-type {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Active状态下文字变白 */
.multi-button-group button.active {
  color: white;
}

效果说明 #

• 把滑动背景移到容器的伪元素上，通过left属性的过渡实现平滑滑动
• 按钮设置z-index:1，保证文字和边框不会被背景挡住
• 不管初始选中6个月还是12个月，只需要修改React里useState的初始值就行，CSS不用改
• 完全保留了原设计的圆角、边框样式

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