Html 伪元素未与定位标记边框对齐

我有以下CSS3按钮动画：

HTML:：

<a href="" class="btn">
  <span>
        Hover on Me
  </span>
</a>

现在的问题是，我使用

：before

和

：after

伪元素创建的边框没有在锚定标记的边框顶部精确对齐，它看起来像按钮内部的2px

我添加了

box size:border-box

属性，但仍然得到相同的结果，为什么我不能将伪元素对齐到锚定边框的顶部

如您所见，我使用了以下属性，但仍然没有得到预期的结果：

*,*:before,*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

---

由于伪元素是它们应用到的元素的子元素，因此在这种情况下，锚定

btn

，它们的边框不会在

btn

顶部对齐，而是直接在其内部对齐

添加并不能改变这一点。其目的是告诉元素其设置的边框/填充大小应包含在其设置的宽度中

因此，要么通过给伪值一个负的位置来移动它们，要么，在本例中，也是最简单的，将一些属性移动到

span

.btn {
  display: inline-block;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.btn span {
  display: inline-block;
  border: 2px solid rgba(0, 0, 0, 0.1);
  color: #252525;
  font-size: 1.25em;
  padding: 0.65em 2em;
  text-transform: uppercase;
}

堆栈片段

/*第1行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
身体{
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
/*第8行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
*,
*：之前，
*：之后{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
/*第82行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
a{
文字装饰：无；
}
/*第85行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
a:悬停，
a:主动，
a:焦点{
文字装饰：无；
}
/*第93行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn{
显示：内联块；
背景：透明；
位置：相对位置；
溢出：隐藏；
}
.btn跨度{
显示：内联块；
边框：2倍实心rgba（0,0,0,0.1）；
颜色：252525；
字号：1.25em；
填料：0.65em2em；
文本转换：大写；
}
/*第19行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn:之前，
.btn:之后{
内容：''；
位置：绝对位置；
左：0；
右：0；
高度：2倍；
背景：#ff0000；
过渡：均为0.85秒；
}
/*第29行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn:之前{
排名：0；
转换：translate3d（-105%，0，0）；
}
/*第33行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn:之后{
底部：0；
转换：translate3d（105%，0,0）；
}
/*第41行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn>span:之前，
.btn>span:之后{
内容：''；
位置：绝对位置；
排名：0；
底部：0；
宽度：2倍；
背景：#ff0000；
过渡：均为0.85秒；
}
/*第51行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn>span:之前{
左：0；
转换：translate3d（0,105%，0）；
}
/*第55行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn>span:之后{
右：0；
转换：translate3d（0，-105%，0）；
}
/*第65行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn:悬停：在，
.btn:悬停：在，
.btn:活动：之前，
.btn:活动：之后，
.btn：焦点：在，
.btn：焦点：之后{
变换：translate3d（0,0,0）；
}
/*第71行，C:/xampp/htdocs/fs/borderAnimation/scss/style.scss*/
.btn:悬停>跨度：之前，
.btn:hover>span:after，
.btn:活动>范围：之前，
.btn:活动>跨度：之后，
.btn:focus>span:before，
.btn:焦点>范围：之后{
变换：translate3d（0,0,0）；
}
/*#sourceMappingURL=../css/style.map*/

---

还有一个问题，在这种情况下，为什么应用于

本身的psudo元素会显示在？@AlexanderSolonik中，因为伪元素就是这样工作的。它们的呈现方式与您拥有的

span

类似，是

a

的子元素。这就是上面的工作原理，因为pseudo和

span

是兄弟。这有意义吗。。。我的意思是，你可以在现有的

span

之前和之后再添加两个

span

，而不是伪代码，并获得相同的结果。实际上，我对此仍有一个混乱的头脑，因为当标签上有填充、边框等时，即使在中应用于节目的psudo元素也不会完全接触到的顶部和底部，但当填充、边框等应用于跨度时，psudo元素会突然与跨度的边框对齐：|@AlexanderSolonik Ahh。。。现在我明白你的要求了。为什么

span

工作的伪位置是相对于锚点

a

的绝对位置，而不是

span

本身，因此它们将重叠

span

的边界。这现在有意义了吗？谢谢你，为了让你的观点更加清晰，在这个页面上添加一个

边框：2px实心橙色

，让这一点更加清晰。。。。。。谢谢你，先生。

.btn {
  display: inline-block;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.btn span {
  display: inline-block;
  border: 2px solid rgba(0, 0, 0, 0.1);
  color: #252525;
  font-size: 1.25em;
  padding: 0.65em 2em;
  text-transform: uppercase;
}