伪元素未与锚标记边框对齐

Question

我有以下CSS3按钮动画：

.HTML：：

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

.CSS：

/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a {
text-decoration: none;
}

/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a:hover,
a:active,
a:focus {
text-decoration: none;
}

/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn {
display: inline-block;
border: 2px solid rgba(0, 0, 0, 0.1);
background: transparent;
color: #252525;
font-size: 1.25em;
padding: 0.65em 2em;
text-transform: uppercase;
position: relative;
overflow: hidden;
}

/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before,
.btn:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #ff0000;
transition: all 0.85s;
}

/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before {
top: 0;
transform: translate3d(-105%, 0, 0);
}

/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:after {
bottom: 0;
transform: translate3d(105%, 0, 0);
}

/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before,
.btn > span:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #ff0000;
transition: all 0.85s;
}

/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before {
left: 0;
transform: translate3d(0, 105%, 0);
}

/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:after {
right: 0;
transform: translate3d(0, -105%, 0);
}

/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover:before,
.btn:hover:after,
.btn:active:before,
.btn:active:after,
.btn:focus:before,
.btn:focus:after {
transform: translate3d(0, 0, 0);
}

/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover > span:before,
.btn:hover > span:after,
.btn:active > span:before,
.btn:active > span:after,
.btn:focus > span:before,
.btn:focus > span:after {
transform: translate3d(0, 0, 0);
}

现在的问题是我使用:before和:after伪元素创建的边框 ，并没有完全对齐锚标签的边框顶部，它看起来像按钮内的 2px。

我添加了box-sizing:border-box属性但仍然得到相同的结果，为什么我无法将伪元素对齐在锚边框的顶部？

在这里摆弄

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

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

Answer 1

由于伪元素是应用它们的元素的子元素，在这种情况下，锚点btn，它们的边框不会在btn顶部对齐，而是直接在内部对齐。

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

因此，要么您必须通过给伪值一个负位置来移动伪属性，要么在这种情况下，绝对最简单的是，将一些属性移动到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;
}

堆栈代码段

/* line 1, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* line 8, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 82, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a {
text-decoration: none;
}
/* line 85, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
a:hover,
a:active,
a:focus {
text-decoration: none;
}
/* line 93, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.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;
}
/* line 19, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before,
.btn:after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 29, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:before {
top: 0;
transform: translate3d(-105%, 0, 0);
}
/* line 33, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:after {
bottom: 0;
transform: translate3d(105%, 0, 0);
}
/* line 41, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before,
.btn > span:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 2px;
background: #ff0000;
transition: all 0.85s;
}
/* line 51, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:before {
left: 0;
transform: translate3d(0, 105%, 0);
}
/* line 55, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn > span:after {
right: 0;
transform: translate3d(0, -105%, 0);
}
/* line 65, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover:before,
.btn:hover:after,
.btn:active:before,
.btn:active:after,
.btn:focus:before,
.btn:focus:after {
transform: translate3d(0, 0, 0);
}
/* line 71, C:/xampp/htdocs/fs/borderAnimation/scss/style.scss */
.btn:hover > span:before,
.btn:hover > span:after,
.btn:active > span:before,
.btn:active > span:after,
.btn:focus > span:before,
.btn:focus > span:after {
transform: translate3d(0, 0, 0);
}
/*# sourceMappingURL=../css/style.map */

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