：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;
    }
}