：before伪元素的灵活用法——前置元素的装饰

如图的小蓝球效果

每条工作经历都是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;
    }
}