为什么这个边界底宽转换在IE 11中无法正常工作？

Question

在Chrome和Firefox中，过渡非常顺利，但在IE11中，border-bottom-width无法正常转换，而是快速转换到悬停状态。

＆＃13;

＆＃13;

.hbtn {
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  padding: 8px 20px;
  margin: 0 3px 6px 3px;
  text-align: center;
  border: solid 3px #000000;
  text-decoration: none;
  color: #000000;
  white-space: nowrap;
  z-index: 0;
}

.hbtn.hb-border-bottom-br2 {
  position: relative;
  transition-duration: .3s;
  overflow: visible;
  box-sizing: border-box;
  border: none;
  padding: calc(8px + 2px) calc(20px + 2px);
}

.hbtn.hb-border-bottom-br2:after {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  border: solid 3px #000000;
  z-index: 2;
}

.hbtn.hb-border-bottom-br2:after {
  transition: all 0.1s 0s linear;
}

.hbtn.hb-border-bottom-br2:hover:after {
  border-left-color: transparent;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-width: calc(3px * 2);
  transition: all 0.1s 0s linear;
}

＆＃13;

<a href="#" class="hbtn hb-border-bottom-br2">Hover Buttons</a>

＆＃13;

＆＃13;

＆＃13;