带有伪元素的CSS脉动按钮效果

我对这些按钮动画代码感到困惑。这些代码产生一个脉冲效果按钮，但我很难解释它们是如何一起工作的，或者引擎盖下是什么

<div >   
    <a href="#" class="btn btn--white btn--animated">btn</a>
</div>

我的主要困惑是：

--如何阅读：：before/after使用纯英语，带

.btn：：after

？我可以这样理解：在运行.btn代码之后，在这里运行这些代码吗？或者使用

.btn--white:：after{background color:#fff；}

我可以读取：在.btn--white执行之后，将背景画成白色

--使用

.btn:：after

时，我们在原始链接按钮的正后方创建了空的btn框。btn:hover:：after时，鼠标指针不是因为Z索引而悬停在原始按钮链接上而不是空按钮上吗

---

--这里是如何呈现脉动效果的？

.btn--white:：after

如何因不断重新绘制空按钮而被调用？

回答第一个问题，

after创建一个伪元素，它是所选元素的最后一个子元素

：回答第二个问题：.btn:hover:after意味着当您将鼠标悬停在按钮上方时，after元素具有一些您可能添加的新属性。第三个问题：在这种情况下，.btn white:：after唯一拥有的是背景色，它没有任何作用，因为它已经是白色了。在html中，btn类已经按照所需的方式进行了样式设置。如果你在html中放置更多的类，下一个类的样式将覆盖上一个。最后一个：在css的第一部分，按钮完成了样式设置。当您悬停该按钮时，将产生框阴影和变换traslate-Y效果。btn:after here以及btn--white:after和btn:hover:after只是默认的引导，您可以删除它们并仍然获得相同的效果。您可以使用它们，更改它们的颜色和背景色，尝试不同的动画，并查看它们的区别。

    .btn:link,    
    .btn:visited {    
      position: relative;
      border-radius: 10rem;
      display: inline-block;
      margin-top: 6rem;
      text-transform: uppercase;
      text-decoration: none;
      padding: 1.5rem 4rem;
      transition: all 1.2s;

    }

    .btn:hover {
      transform: translateY(-.3rem);
      box-shadow: 0 1rem 2rem  rgba(0, 0, 0, .3);
    }


    .btn:active {
      transform: translateY(-.1rem);
      box-shadow: 0 .5rem 1rem  rgba(0, 0, 0, .2);
    }


    .btn--white {

      background-color: #fff;
      color: #777;
    }


    .btn--white::after {    
      background-color: #fff;
    }


    .btn::after {    
      content: "";
      display: inline-block;
      height: 100%;
      width: 100%;
      border-radius: 10rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: all .2s;    
    }


    .btn:hover::after {    
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0;


    }