动画边框没有在角落连接

Question

我前几天有这个工作，但我已经重写了几次代码以使我的所有动画工作和样式显示，现在由于某种原因，这些动画边框没有连接三个角落。有人可以告诉我翻译中丢失了什么吗？

.desktopNav {
  list-style: none;
  position: fixed;
  display: block;
  top: 60px;
  margin: 0 auto;
}

.desktopNav li {
  display: inline;
  position: relative;
  margin: 0 1.7em;
}

.desktopNav a {
  text-decoration: none;
  color: #222323;
  font-family: 'Raleway';
  font-size: 2em;
  font-weight: 200;
  padding: 10px 15px;
  position: relative;
}

.hoverbox::before,
.hoverbox::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
}

.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}

  <ul class="menu desktopNav">

  <li><a href="#" class="hoverbox">home</a></li>

  <li><a href="#" class="hoverbox">about</a></li>

  <li><a href="#" class="hoverbox">services</a></li>
  </div>


  <li><a href="#" class="hoverbox">work</a></li>

  <li><a href="#" class="hoverbox">process</a></li>

  <li><a href="#" class="hoverbox">contact</a></li>
  </div>
</ul>

Answer 1

使用box-sizing。

.hoverbox::before,
    .hoverbox::after {
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      border-style: solid;
      border-color: #f7941e;
      box-sizing: border-box;
    }

＆＃13;

＆＃13;

.desktopNav {
  list-style: none;
  position: fixed;
  display: block;
  top: 60px;
  margin: 0 auto;
}

.desktopNav li {
  display: inline;
  position: relative;
  margin: 0 1.7em;
}

.desktopNav a {
  text-decoration: none;
  color: #222323;
  font-family: 'Raleway';
  font-size: 2em;
  font-weight: 200;
  padding: 10px 15px;
  position: relative;
}

.hoverbox::before,
.hoverbox::after {
  content: '';
  position: absolute;
  transition: transform .5s ease;
}

.hoverbox::before,
.hoverbox::after {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
  border-color: #f7941e;
  box-sizing: border-box;
}

.hoverbox::before {
  border-width: 2px 0 2px 0;
  transform: scaleX(0);
}

.hoverbox::after {
  border-width: 0 2px 0 2px;
  transform: scaleY(0);
}

.hoverbox:hover::before,
.hoverbox:hover::after {
  transform: scale(1, 1);
}

＆＃13;

  <ul class="menu desktopNav">

  <li><a href="#" class="hoverbox">home</a></li>

  <li><a href="#" class="hoverbox">about</a></li>

  <li><a href="#" class="hoverbox">services</a></li>
  </div>


  <li><a href="#" class="hoverbox">work</a></li>

  <li><a href="#" class="hoverbox">process</a></li>

  <li><a href="#" class="hoverbox">contact</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是修复它的一种方法：

工作小提琴：http://jsfiddle.net/gratiafide/p4cv3cez/

.hoverbox::before, .hoverbox::after {
    content:'';
    position: absolute;
    transition: transform .5s ease;
}
.hoverbox::before, .hoverbox::after {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-style: solid;
    border-color: #f7941e;
}
.hoverbox::before {
    border-width: 0 0 0 0;
    transform: scaleX(0);
}
.hoverbox::after {
    border-width: 2px 2px 2px 2px;
    transform: scaleY(0);
}
.hoverbox:hover::before, .hoverbox:hover::after {
    transform: scale(1, 1);
}