befor伪元素使用背景填充覆盖主元素时出现白边是为什么？

Question

我打算做伪元素覆盖a标签按钮背景色达成动画效果，但是发现top为0确无法完全重合之前的按钮元素，求解答

<div class="betterbtn">
  <a href="#" class="btn">登录</a>
</div>

*{
  margin:0;
  padding:0;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}
.betterbtn{
  width:220px;
  height:65px;
  font-size:20px;
}
.betterbtn > .btn{
  width:inherit;
  height:inherit;
  border:3px solid blue;
  color:#000;
  font-size:inherit;
  display:block;
  text-decoration:none;
  display:flex;
  justify-content:center;
  align-items:center;
  box-sizing:border-box;
  z-index:0;
  position:relative;
}
.betterbtn > .btn::before{
  content:"";
  display:block;
  position:absolute;
  top:0;
  width:inherit;
  height:200%;
  background:blue;
  z-index:-1;
  transition:.8s;
  box-sizing:border-box;
}

Answer 1

没有复现。而且看上去是需要 -border

http://jsrun.net/xw9Kp/edit

你也可以让他去父级 http://jsrun.net/Hw9Kp/edit