От автора: подчеркивание – это непростая задача. Все становится еще сложнее, если вам нужно, что-то более интересное и анимированное, чем может предложить text-decoration: underline в CSS. Есть много разных техник. К сожалению, они почти всегда имеют значительные недостатки.
Я столкнулся с некоторыми из этих недостатков, когда хотел «позаимствовать» стили ссылок в посте Кэсси Эванс.
У ссылок есть удивительный эффект, когда вы наводите на них курсор. Подчеркивание смещается и заменяется новым, когда вы наводите на ссылку курсор.
Проблема, с которой я столкнулся: ссылки в моем блоге часто переносятся на новую строку, и значит часть ссылки останется неподчеркнутой.
Цель
Цветное выделение под ссылками должно иметь эффект наведения: линия смещается и заменяется другой с другим цветом. Лини не должны соприкасаться во время смены, между ними должно быть пространство. Ссылки, которые переносятся на новые строки, должны быть подчеркнутыми во всех строках.
Использование фона
Есть много разных способов подчеркнуть фрагмент текста. Метод, который я в итоге использовал, отвечал всем требованиям: использование свойства CSS background-image.
Для background-image можно задать сплошной цвет, определяя его как линейный градиент, который переходит от одного цвета к тому же цвету.
Почему я использую, background-image, а не background-color, если я собираюсь использовать сплошной цвет? Потому что многие свойства для манипулирования фоном работают только при использовании background-image.
Размер фона ограничен по высоте и занимает всю ширину элемента анкора путем установки для background-size 2px и 100% соответственно.
Это по-прежнему покрывает весь фон, потому что теперь повторяется снова и снова, пока не охватит весь фон. Таким образом, я остановил background-repeat вместо no-repeat.
Линия вверху элемента анкора! Позиционируя ее с помощью background-position со значением 0 100%, я размещаю ее по левом краю, и в 100% от верхнего края элемента ссылки. Другими словами, внизу… Теперь она внизу.
Два фона
Чтобы использовать несколько фоновых изображений и манипулировать ими, задайте для свойств background-* несколько значений, разделенных запятой.
Первая запись в списке, разделенном запятыми, находится сверху, а каждая следующая — слой за ней. Фон следующего элемента ссылки будет полностью черным (#000000). Есть также белый (#FFFFFF), но его не видно, потому что он закрыт черным.
a { background-image: linear-gradient(#000000, #000000), linear-gradient(#ffffff, #ffffff);
}В приведенном ниже примере установлены два фона. Оба внизу, так что один перекрывает другой.
a { color: #dfe5f3; text-decoration: none; background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)), linear-gradient(#feb2b2, #feb2b2); background-size: 100% 2px, 100% 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat, no-repeat;
}Переход для background-size
Заметили, чем отличаются background-position, хотя оно не имеет никакой видимой разницы? Одно привязано к левой стороне, другое — к правой стороне.
Далее я задам переход между одним фоном, занимающим всю ширину до без ширины при наведении, а для второго фона все наоборот. Это будет влиять на то, в какую точку перемещается каждый фон.
a { color: #dfe5f3; text-decoration: none; background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188)), linear-gradient(#feb2b2, #feb2b2); background-size: 100% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 2s linear;
}
a:hover { background-size: 0 2px, 100% 2px;
}Три фона
Мы почти достигли цели. Единственное, чего не хватает — это пробела между двумя подчеркиваниями. Это пространство можно имитировать, переместив блок того же цвета, что и фон. Что это за блок? Вы догадались: еще один фон.
Что может быть лучше двух фонов? Три фона! Три фона .. а-ха-ха. Я помещу этот фон поверх двух других, указав его в списке значения для background-image первым.
Не забывайте: Первое значение для свойств background-* теперь также указывает на это недавно добавленное background-image.
Ширина и высота задаются через background-size. Хотя для высоты установлен тот же размер, что и для других фонов (2pxв этом примере). На этот раз ширина устанавливается довольно маленькой 20px.
Переход background-position
Чтобы сделать блок разделителя невидимым перед наведением на элемент анкора, фону присваивается отрицательное значение background-position, которое размещает его слева от элемента и, таким образом, полностью за пределами экрана.
После наведения на анкор блок должен переместиться на противоположную сторону подчеркивания, пока он снова не окажется полностью за кадром. Функция calc() используется для вычисления обеих этих позиций.
a { color: #dfe5f3; text-decoration: none; background-image: linear-gradient(#222b40, #222b40), linear-gradient( rgb(176, 251, 188), rgb(176, 251, 188) ), linear-gradient(#feb2b2, #feb2b2); background-size: 20px 2px, 100% 2px, 0 2px; background-position: calc(20px * -1) 100%, 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 2s linear, background-position 2s linear;
}
a:hover { background-size: 20px 2px, 0 2px, 100% 2px; background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
}Автор: Nicky Meuleman
Источник: https://nickymeuleman.netlify.app
Редакция: Команда webformyself.