Недавно я работал над проектом, в котором мне нужно было создать стиль ссылок, который бы выделялся при наведении курсора.

Первая итерация была сделана очень просто с помощью псевдоэлемента с красным фоном, который будет перемещаться от ширины 0% до 100% при наведении, и я также изменил положение, установив его слева направо, чтобы создать этот эффект прохождения :

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

Немного покопавшись, я нашел отличный способ справиться с этим с помощью линейных градиентов и без псевдоэлементов:

Как это работает? Линейный градиент просто переходит от красного к красному, поэтому на самом деле это не очень то и градиент. Почему бы просто не использовать цвет фона? Это связано с тем, что градиенты считаются фоновыми изображениями в CSS, что позволяет нам использовать это background-size свойство для управления размером градиента, чего нельзя сделать с цветами фона. Это дает плавный эффект выделения с очень небольшим количеством кода.

Последний пункт, который я хотел настроить, должен был изменить цвет текста при перемещении выделения. Текст просто переходит от красного к черному при наведении курсора без ощущения выделения. Это очень легко сделать, используя mix-blend-mode элемент span внутри тега привязки. Так как цвет фона совпадает с цветом текста, при установке mix-blend-mode на него difference будет выделен черный цвет текста при наведении:

К сожалению, это работает только на белом фоне, в противном случае mix-blend-mode цвет текста изменится на красный, какой бы ни была разница между красным цветом и цветом фона. При этом весь эффект может быть достигнут с помощью всего лишь нескольких строк кода:

a {
  color: red;
  text-decoration: none;

  position: relative;
  padding: 3px;
  margin: -3px;

  background: linear-gradient(to right, red, red) no-repeat right;
  background-size: 0% auto;

  transition: background-size 0.3s, background-position 0s;

  &:hover {
    background-size: 100% auto;
    background-position: left;
  }

  span {
      mix-blend-mode: difference;
  }
}

Перевод