在CSS中阻止：after和：之前的动画

Question

我正在尝试为具有：after元素的HTML元素设置动画。在制作动画时，：之后也会变得生动。有没有办法阻止动画：after或：before元素？

示例：

HTML：

<div class="animate"></div>

CSS：

.animate{
     position: relative;
     animation: zoom 2s ease-in-out infinite;
}
.animate:after{
     content: " ";
     position: absolute;
     width: 20px;
     height: 20px;
     background: green;
}
@keyframes zoom {
     0%{
        transform: scale(0);
     }
     50%{
        transform: scale(1.5);
     }
     100%{
        transform: scale(0);
     }