CSS :after伪元素已设置content属性却无法显示问题求助

问题 #

Ajax请求执行期间，给“更新”按钮添加updating类后，仅:before伪元素正常显示，:after伪元素虽已设置content属性却无法显示。

原CSS代码 #

.update-question-form button {display: inline-block;background-color: #007bff;color: #fff;border: none;padding: 10px 20px;border-radius: 3px;cursor: pointer;font-size: 16px;position: relative;overflow: hidden;z-index: 1;}/* Add animation to the update button */.update-question-form button.updating:before,.update-question-form button.updating::after {position: absolute;width: 33%;height: 200%;transform: translateX(-50%) translateY(-50%) rotate(-20deg);animation: slide1 1s linear infinite;z-index: -1;}.update-question-form button.updating::after {content: " ";background-color: #ccc;animation: slide2 1s linear infinite;}.update-question-form button.updating:before {content: '';background-color: #09316c;animation: slide1 1s linear infinite;}@keyframes slide1 {0% {right: -33%;}100% {right: 100%;}}@keyframes slide2 {0% {right: -100%;}100% {right: 33%;}}

问题原因 #

1. 两个伪元素都设置了z-index: -1，且:before的CSS定义在:after之后，层叠优先级更高，导致:after被完全遮挡。
2. 伪元素缺少top定位属性，transform: translateY(-50%)无法生效，位置偏移进一步加剧了遮挡问题。

修复后的CSS代码 #

.update-question-form button {
    display: inline-block;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 16px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Add animation to the update button */
.update-question-form button.updating:before,
.update-question-form button.updating::after {
    position: absolute;
    width: 33%;
    height: 200%;
    transform: translateX(-50%) translateY(-50%) rotate(-20deg);
    z-index: -1;
    top: 50%; /* 补充垂直居中定位 */
}

.update-question-form button.updating::after {
    content: "";
    background-color: #ccc;
    animation: slide2 1s linear infinite;
    z-index: -2; /* 降低z-index避免被:before遮挡 */
}

.update-question-form button.updating:before {
    content: '';
    background-color: #09316c;
    animation: slide1 1s linear infinite;
}

@keyframes slide1 {
    0% { right: -33%; }
    100% { right: 100%; }
}

@keyframes slide2 {
    0% { right: -100%; }
    100% { right: 33%; }
}

修复说明 #

• 给伪元素补充top: 50%，确保transform能正确实现垂直居中，修正位置偏移。
• 将:after的z-index设为-2，低于:before的-1，保证两个伪元素都能显示。
• 移除了通用样式中统一设置的animation，让每个伪元素使用自己定义的动画，避免冲突。

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