如何删除仅出现在Edge中的此下划线？

Question

我正在我的网站上实现this设计元素，该元素使用Foundation框架。一切正常，除了在Microsoft Edge和IE中，在不应有的情况下（即，当不与链接进行交互时），在下划线处会出现一个流浪痕。

这是在Codepen中重新创建的代码：

https://codepen.io/andk/pen/JwrVMg

.hover-underline-menu {
  width: 100%;
}

.hover-underline-menu ul {
  padding: 1rem 0;
}

.hover-underline-menu .menu {
  background-color: #2C3840;
}

.hover-underline-menu .menu a {
  color: #fff;
  padding: 1rem 2rem;
}

.hover-underline-menu .menu a {
  position: relative;
}

.hover-underline-menu .menu a::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.125rem);
  border-bottom: 0.125rem solid white;
  left: 50%;
  right: 50%;
  transition: all 0.5s ease;
}

.hover-underline-menu .menu a:hover::after {
  left: 0;
  right: 0;
  transition: all 0.5s ease;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
  <ul class="menu align-center">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</nav>

请注意单词“一个”下面的点。如何为Edge / IE修复此问题？另外，您知道为什么它仅出现在“一个”而不是其他导航链接上吗？

谢谢！

Answer 1

将百分比增加超过50%，以确保宽度为0，这样您就可以避免此错误

.hover-underline-menu {
  width: 100%;
}

.hover-underline-menu ul {
  padding: 1rem 0;
}

.hover-underline-menu .menu {
  background-color: #2C3840;
}

.hover-underline-menu .menu a {
  color: #fff;
  padding: 1rem 2rem;
}

.hover-underline-menu .menu a {
  position: relative;
}

.hover-underline-menu .menu a::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.125rem);
  border-bottom: 0.125rem solid white;
  left: 51%;
  right: 51%;
  transition: all 0.5s ease;
}

.hover-underline-menu .menu a:hover::after {
  left: 0;
  right: 0;
  transition: all 0.5s ease;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
  <ul class="menu align-center">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</nav>

您还可以像下面那样简化代码，而无需伪元素：

.hover-underline-menu {
  width: 100%;
}

.hover-underline-menu ul {
  padding: 1rem 0;
}

.hover-underline-menu .menu {
  background-color: #2C3840;
}

.hover-underline-menu .menu a {
  color: #fff;
  padding: 1rem 2rem;
  background:
    linear-gradient(white,white) bottom no-repeat;
  background-size:0% 0.125rem;
  transition: all 0.5s ease;
}
.hover-underline-menu .menu a:hover {
 background-size:100% 0.125rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
  <ul class="menu align-center">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</nav>

Answer 2

在下面的代码中，我已将width属性添加到正常状态和之后的状态，即'width：0;'和“宽度：100％”。我还使用了“ ease-in-out”而不是“ ease”，并使用了显示属性“ block”和“ inline-block”。

我也在EDGE中进行了测试，并且可以正常工作

这是':: after'和'：hover :: after'中的宽度设置，它们进行所需的更改，将前者设置为零，然后设置为100％。

请参阅下面的注释以进行修改

.hover-underline-menu {
  width: 100%;
}

.hover-underline-menu ul {
  padding: 1rem 0;
}

.hover-underline-menu .menu {
  background-color: #2C3840;
}

.hover-underline-menu .menu a {
  color: #fff;
  padding: 1rem 2rem;
}

.hover-underline-menu .menu a {
  position: relative;
  display: inline-block; /*added inline-block here */
}

.hover-underline-menu .menu a::after {
  content: "";
  position: absolute;
  top: calc(100% - 0.125rem);
  display: block; /* Added display block */
  left: 50%;
  right: 50%;
  width: 0; /* added width property so no dot in EDGE */
  transition: all 0.5s ease-in-out; /* Used ease-in-out instead of ease */
  border-bottom: 0.125rem solid white;

}

.hover-underline-menu .menu a:hover::after {
  
  width: 100%; /* Added width 100% */
  left: 0;
  right: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<nav class="hover-underline-menu">
  <ul class="menu align-center">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</nav>