：before伪元素的灵活用法——前置元素的装饰-优快云博客

本文介绍如何使用CSS伪元素及动画实现列表项前的小蓝球装饰效果，并在鼠标悬停时产生阴影闪烁动画。通过调整before伪元素的位置和属性，结合关键帧动画，可以轻松为网页增添动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图的小蓝球效果

每条工作经历都是li元素，利用before伪元素在 li 前加小蓝球装饰效果，且鼠标悬停 li 区域时有小蓝球外围阴影闪烁效果

注意：调用动画的用法，第一次遇到的难点就是不知道怎样才能指定动画在哪里被触发什么时候开始

.work-list li {
    position: relative;
    padding-left: 15px;
}
.work-list li:before{
    position: absolute;
    left: -4px;  //调整小球的水平位置，让它处在渐变线的中间
    top: 0;
    content:"";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #188eee;
    box-shadow: 0 0 0 3px #a3cef1;
}
.work-intro ul li:hover::before{
    animation: titleIcon 1s ease infinite; //鼠标悬停在特定区域时才调用动画，让小球阴影闪烁
    animation-direction: alternate;
}
@keyframes titleIcon {
    0% {
        box-shadow: 0 0 0 5px #a3cef1;
    }
    50% {
        box-shadow: 0 0 0 15px #a3cef1;
    }
    100% {
        box-shadow: 0 0 0 5px #a3cef1;
    }
}