CSS实现checkbox选中时旋转>符号失效问题求助

你的问题核心是CSS transform属性无法作用于inline元素，默认情况下::after伪元素的display属性是inline，所以旋转效果不生效。以下是修复方案：

修复后的CSS代码 #

/* 先给伪元素设置基础样式，确保transform能生效 */
.tab-label::after {
    content: ">";
    /* 关键：将伪元素改为行内块级元素，transform仅对这类元素生效 */
    display: inline-block;
    /* 可选：设置旋转中心，让旋转围绕符号中心进行 */
    transform-origin: center;
    /* 可选：添加过渡动画，让旋转过程更平滑 */
    transition: transform 0.2s ease;
    /* 保留你原有的其他样式，比如间距 */
    margin-left: 8px;
}

input:checked + .tab-label::after {
    transform: rotate(90deg);
}

关键修改点说明 #

• display: inline-block：这是解决问题的核心，因为CSS的transform属性不支持inline元素，将伪元素改为行内块级后，旋转效果就能正常触发。
• transform-origin：显式设置旋转中心为元素中心，避免旋转位置偏移（默认也是中心，但显式设置更稳妥）。
• transition：添加过渡动画让旋转有平滑的动效，提升交互体验（可选，根据需求决定是否保留）。

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