html - 伪元素与 anchor 标记边框不对齐

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 伪元素创建的边框没有完全对齐 anchor 标记，它看起来像按钮内的 2px。

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

FIDDLE HERE

如您所见，我使用了以下属性，但仍然没有得到想要的结果:

*,*: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>