Как мне убрать это блуждающее подчеркивание, которое появляется только в Edge? - PullRequest
Новая
       16

Как мне убрать это блуждающее подчеркивание, которое появляется только в Edge?

0 голосов
/ 29 декабря 2018

Я реализую этот элемент дизайна на моем сайте, который использует платформу 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?Кроме того, есть идеи, почему он появляется только в «One» вместо других навигационных ссылок?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Увеличьте процент больше, чем 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>
0 голосов
/ 30 декабря 2018

В приведенном ниже коде я добавил свойства ширины в нормальное состояние и после состояний, то есть 'width: 0;'и «ширина: 100%».Я также использовал «easy-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>
...