css - 为什么伪元素周围有额外的空间？

Question

我在我的按钮上使用伪元素::after 和::before 来制作动画。我在 3 个不同的平台上重现了这个问题。很难看到，但拐 Angular 处有额外的空间。放大使其更易于查看。

我使用的是 Bootstrap，但我已经在使用和不使用 Bootstrap 的情况下进行了复制。

http://codepen.io/sinrise/pen/vLaGzN

<a href="#" class="btn btn-default btn-action">Test Button</button>

正常

悬停

Answer 1

已更新

进行了更多测试和研究，发现了真正的问题...从 a.btn-action 规则中删除 z-index: 1;

a.btn-action {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    color: black;
    transition: color 0.4s;
    transition-delay: 0.3s;
}

Updated codepen