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属性，但我仍然得到相同的结果，为什么我无法将锚元素顶部的伪元素对齐？

FIDDLE HERE

正如您所看到的，我使用了以下属性，但仍未获得所需的结果：

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

Answer 1

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

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

所以要么你必须通过给它们一个负位置移动伪，或者在这种情况下，绝对最简单，将一些属性移动到.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 */

Stack snippet

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

{{1}}

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

1 个答案: