Почему этот эффект наведения на ссылку начинается с середины, а не слева?

Я не понимаю, почему в приведенном ниже коде эффект наведения ссылки начинается с середины, а не слева направо. Может кто-нибудь объяснить, почему это происходит?

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p>Visit the official rules <a class = "orange-link" href = "#">here</a> on how to send in a write-in entry.</p>

@ATomCalledStu ничего не сделает, потому что OP использует свойство масштаба

— 17.06.2019 20:04

попробуйте developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

— 17.06.2019 20:05

html css

17.06.2019 19:57

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

147

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Вам нужно добавить transform-origin: top left; к .orange-link:before

Скрипка

Если вы не укажете источник преобразования, по умолчанию он будет в центре.

Я думаю, transform-origin" left; будет достаточно, на самом деле.

— 17.06.2019 20:06

Вопрос в том, чтобы понять, почему именно из центра. Спрашивающий не упоминает, что хочет, чтобы это было слева.

— 17.06.2019 20:07

Хорошо, объяснение добавлено.

— 17.06.2019 20:09

17.06.2019 20:04

Ответ принят как подходящий

Это потому, что источником CSS-преобразований по умолчанию является центр элемента.

"By default it is at the center of the element and can be moved. It is used by several transforms, like rotations, scaling or skewing, that need a specific point as a parameter." — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms

Линия охватывает всю ширину, но для начала масштабируется до 0 (от центра). Затем при наведении линия масштабируется до исходной полной ширины.

17.06.2019 20:06

Это происходит потому, что вы масштабируете элемент. Масштабируется от середины, потому что начало координат находится посередине (по умолчанию).
Как видел здесь

By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element.

Возможное исправление может заключаться в использовании ширины

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0 !important;
  background: orange;
  bottom: 0;
  width: 0%;
  border-radius: 5px;
  transition: 0.25s linear;
}

.orange-link:hover::before,
.orange-link:focus::before {
  width: 100%;
}

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0 !important;
  background: orange;
  bottom: 0;
  width: 0%;
  border-radius: 5px;
  transition: 0.25s linear;
}

.orange-link:hover::before,
.orange-link:focus::before {
  width: 100%;
}

<p class = "read-or-listen-to-excerpt">
  Visit the official rules <a class = "orange-link" href = "#">here</a> on how to send in a write-in entry.
</p>

Или вы можете даже сместить начало координат на transform-origin: bottom left; и сделать это

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  transform-origin: bottom left;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p class = "read-or-listen-to-excerpt">
  Visit the official rules <a class = "orange-link" href = "#">here</a> on how to send in a write-in entry.
</p>

17.06.2019 20:06

Вам нужно изменить transform-origin так, чтобы он начинался слева:

.orange-link {
  color: orange;
  position: relative;
  text-decoration: none;
}

.orange-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: orange;
  bottom: 0;
  border-radius: 5px;
  transform: scaleX(0);
  transition: .25s linear;
    transform-origin:left bottom;
}

.orange-link:hover:before,
.orange-link:focus:before {
  transform: scaleX(1);
}

<p class = "read-or-listen-to-excerpt">
  Visit the official rules <a class = "orange-link" href = "#">here</a> on how to send in a write-in entry.
</p>

Это не отвечает на вопрос, почему она начинается из центра.

— 18.06.2019 19:32

@sean Я должен был упомянуть, что по умолчанию стоит center center.

— 18.06.2019 20:03

17.06.2019 20:06