css - CSS 中的脉动社交媒体按钮

Question

所以我使用 CSS 创建了这些脉动的社交媒体按钮。几次脉动后，您可以看到在 Instagram 图标的右侧有一条小红线。关于导致此问题的原因以及如何删除它的任何想法？

https://jsfiddle.net/pm9hkyy8/2/

片段:

@keyframes pulser {
  from {
    color: rgba(0, 0, 0, 0.2);
  }
  to {
    color: rgba(255, 255, 255, 1);
  }
}
#footer a {
        color: #999;
        color: rgba(185, 186, 187, 0.5);
        animation-name: pulser;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
}

/* Stopping the pulsation on hover for that particular child */
a:hover {
  color: #bbb;
  color: #b9babb;
  animation-name: pulser;
  animation-duration: 2s;
  animation-iteration-count: 0;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

此外，请随意使用此代码并对其进行改进:)​​

截图:http://puu.sh/qJBkj/d3701d834e.png

Answer 1

删除下面的空 CSS 并导致该行

            #footer .actions li a:before {

            }

https://jsfiddle.net/Nagasai_Aytha/pm9hkyy8/4/