Почему от подчёркивания ссылки, от элемента ::before остаётся 1px? Как убрать этот глюк?

Question

1)При подчёркивание ссылки у элемента ::before width = 100%; 2)Когда я отвожу курсор от ссылки у элемента ::before width = 0; , НО не зависимо от 0% остаётся 1px от before. 3)Объясните, почему так происходит, и как это исправить?

Answer 1

Браузерам не нравится, когда им приходится вычислять позиции и размеры элементов на веб-странице. Большинство элементов каким-то образом влияют на отображение других элементов. Изменение размеров одного элемента может иметь множество непредвиденных последствий.

Изменение width и / или height элемента потребует, чтобы браузер вычислил, какие другие элементы (дочерние элементы, смежные элементы или родительский элемент) будут затронуты этим изменением и как эти элементы должны быть обновлены. Этот процесс называется перекомпоновкой и сопровождается перерисовкой.

Это затратные операции, нужно максимально избегать их запуска.

Для анимаций лучше использовать transform или opacity

Автор: Rik Schennink
Источник: https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/

a {
  position: relative;
  font-size: 30px;
  cursor: pointer;
}

a::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: red;
  transform-origin: center center;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;
}

a:hover::before {
  transform: scaleX(1);
}

<a>ссылка</a>

БЛОГ НА HUSL

Почему от подчёркивания ссылки, от элемента ::before остаётся 1px? Как убрать этот глюк?

Ответы (1 шт):