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

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

由于伪元素是它们所应用的元素的子元素，在这种情况下是 anchor 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>