CSS伪元素和动画结合能实现哪些效果？transition、animation与before、after实践方法是什么

CSS伪元素before和after可以在选中的元素前后插入虚拟内容，结合transition过渡动画和animation关键帧动画，能够在不增加额外DOM节点的情况下实现很多实用的交互效果，比如按钮悬停动效、加载状态提示、内容装饰动画等。

一、transition与伪元素结合实践

transition适合实现状态切换类的简单动画，当元素的某个属性值发生变化时，transition可以让变化过程更平滑。伪元素同样支持transition，只需要在伪元素的样式中定义transition属性，再在触发条件下修改伪元素的对应属性即可。

1.1 按钮悬停伪元素动效

下面的示例实现了一个按钮悬停时，伪元素从左侧滑入并改变背景色的效果：

/* 基础按钮样式 */
.btn {
    position: relative;
    padding: 12px 24px;
    background-color: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    font-size: 16px;
}

/* before伪元素初始状态 */
.btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    transition: left 0.3s ease;
}

/* 悬停时伪元素状态变化 */
.btn:hover::before {
    left: 0;
}

这里给按钮设置了overflow: hidden，避免伪元素滑出按钮范围，伪元素的left属性从-100%过渡到0，就实现了滑入效果。

1.2 文本下划线动效

还可以用after伪元素配合transition实现文本下划线从中间向两侧展开的效果：

.text-link {
    position: relative;
    display: inline-block;
    color: #333;
    text-decoration: none;
    font-size: 18px;
    padding-bottom: 4px;
}

.text-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #409eff;
    transition: all 0.3s ease;
}

.text-link:hover::after {
    left: 0;
    width: 100%;
}

二、animation与伪元素结合实践

animation适合实现循环、复杂的多状态动画，通过定义关键帧可以控制动画在不同时间点的样式。伪元素同样支持animation属性，只需要在伪元素样式中绑定定义好的关键帧动画即可。

2.1 加载状态旋转动效

下面的示例用after伪元素实现一个简单的圆形加载旋转效果：

/* 定义旋转关键帧 */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loading {
    position: relative;
    width: 40px;
    height: 40px;
    border: 3px solid #e5e5e5;
    border-radius: 50%;
}

.loading::after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-top-color: #409eff;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

这里after伪元素只显示顶部边框，通过无限循环的旋转动画，就形成了加载时的旋转提示效果，不需要额外添加DOM节点。

2.2 卡片悬停装饰动画

用before和after伪元素配合animation可以实现卡片悬停时的多元素动画效果：

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.card {
    position: relative;
    width: 300px;
    height: 200px;
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
}

.card::before,
.card::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.card::before {
    top: 10px;
    right: 10px;
    border-top: 2px solid #409eff;
    border-right: 2px solid #409eff;
}

.card::after {
    bottom: 10px;
    left: 10px;
    border-bottom: 2px solid #409eff;
    border-left: 2px solid #409eff;
}

.card:hover::before,
.card:hover::after {
    animation: fadeInScale 0.3s ease forwards;
}

.card:hover::after {
    animation-delay: 0.1s;
}

这里两个伪元素分别在卡片的右上角和左下角显示边框装饰，悬停时依次执行淡入放大的动画，让卡片的交互更有层次感。

三、注意事项

• 伪元素必须设置content属性才会生效，即使内容为空也需要写content: ""
• 伪元素的动画和过渡属性需要写在伪元素自身的样式中，不能写在原元素的样式里
• 如果伪元素需要定位，原元素需要设置position: relative等非static的定位属性
• transition只能定义开始和结束两个状态，复杂的多状态动画建议使用animation实现

伪元素和动画结合的核心思路是：伪元素作为独立的渲染节点，支持所有CSS样式属性，自然也支持transition和animation的相关属性，只需要按照普通元素的动画写法应用到伪元素上即可。

CSS伪元素transitionanimationbefore_after修改时间：2026-07-22 23:27:27