Представляю коротенькие фрагменты кода(сниппет) CSS, для реализации выделения анкоров ссылок с плавным подчёркиванием при наведении.
Зачем нужно выделять ссылки из общего месива текста, это и ежу понятно. Существует великое многообразие способов и видов оформления ссылок, всё ограничивается лишь фантазией мастера.
С помощью псевдо-класса:hover
и магии CSS3, можно навесить на стандартные, скучно-оформленные синюшные ссылки, практически любой эффект.
Решения, о которых пойдёт речь сегодня, не представляют из себя, что-нибудь особо потрясающее или необычное. Всё по-простому, без особых наворотов, только лишь выделение ссылки цветом и лёгкая анимация линии подчёркивания.
Детально распишу только код CSS, так как на стороне Html менять и добавлять что-либо нет необходимости.
CSS
Во-первых, с помощью свойства line-height:
установим межстрочный интервал в зависимости от базовой линии шрифта, у вас значение может быть другим. Сделаем ссылку блочно-строчной, встроенной в структуру текста, задав ей свойство display
со значением inline-block
. Избавимся от стандартного подчёркивания прописав text-decoration:none;
и зальём ссылку нужным нам цветом.
a { line-height: 1; display: inline-block; color:#ffeb3b; text-decoration:none; cursor: pointer; } |
Затем используем псевдоэлемент :after
, чтобы у нас появилась возможность добавить дополнительный элемент, в нашем случае это линия, и определим простенький эффект перехода в свойстве transition:
. Ширину линии изначально выставим с нулевым значением width: 0%;
, высоту определим в 2px. Цвет линии может быть любым, в примере не стал особо фантазировать и выставил в соответствии цвета текста ссылки.
a:after { display: block; content: ""; height: 2px; width: 0%; background-color: #ffeb3b; transition: width .3s ease-in-out; } |
Остаётся дело за малым, добавить нашей ссылке немного движухи. Для этого используем парочку псевдоклассов :hover
и :focus
. Первый будет определяет стиль ссылки при наведении, второй сработает когда на ссылке «плотно» установится курсор. Здесь мы изменим значение ширины, определим его в 100%.
Теперь, при наведении или фокусе на ссылке, стилизованная линия подчеркивания явит себя взору пользователя, плавно с еле-заметной задержкой, время которой, мы предусмотрительно определили ранее в свойстве transition:
.
a:hover:after, a:focus:after { width: 100%; } |
В итоге мы получаем следующую картину:
Весь код в сборе будет выглядеть так:
a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; } a:hover:after, a:focus:after { width: 100%; } |
Конечно, это всего лишь один из самых простеньких и скромных вариантов оформления ссылок. Больше экспериментируйте, добавляйте красок, используйте анимацию, сдвигайте вправо или влево, делайте ссылки перевёртыши например, и т.д и т.п, главное не переусердствовать, всё должно быть с чувством, толком, и расстановкой.
Обновление и дополнения от 22.10.2017
В комментариях проскакивали вопросы о том, как сделать подчёркивание с центра текста ссылки, с плавным растягиванием в стороны. Если есть спрос, значит будет и предложение ))).
Всё довольно просто, необходимо лишь добавить пару-тройку новых свойств, то есть, для основного элемента a
определить позиционирование относительным position:relative;
, а для псевдоэлемента a:after
абсолютным position:absolute;
с расстоянием от левого края родительского элемента left:50%;
, а так же с помощью свойства transform
определить сдвиг элемента по горизонтали на указанное значение transform:translateX(-50%)
.
На выходе мы получаем вот такой результат:
В сборе весь код css, для плавного подчёркивания ссылки с центра, должен выглядеть примерно так:
a { display: inline-block; color:#ffeb3b; line-height: 1; text-decoration:none; cursor: pointer; position:relative; } a:after { background-color: #ffeb3b; display: block; content: ""; height: 2px; width: 0%; left:50%; position:absolute; -webkit-transition: width .3s ease-in-out; -moz--transition: width .3s ease-in-out; transition: width .3s ease-in-out; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); transform:translateX(-50%); } a:hover:after, a:focus:after { width: 100%; } |
На сегодняшний день, учитывая то, что все современные браузеры всё более уверенно поддерживают свойства из обоймы CSS3, практически нет никаких ограничений для оригинального оформления ссылок, по-большому счёту, всё зависит от ваших фантазий, да и готовых решений в интернетах предостаточно, при желании отыщется, как говорится — на любой вкус и цвет.
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
А можно реализовать для рамки фотографии , чтобы рамка появлялась по середине и расстягивалась по сторонам ?
Здравствуйте.
Конечно можно, есть у меня заготовка, посмотрите как один из вариантов: Тынц
Толщина рамки и её цвет легко настраиваются, направление анимации правда не совсем то что вам нужно, но думаю принцип будет понятен и вы сумеете разобраться
Вдогонку, на скорую руку, подготовил для вас ещё один вариант, думаю, это будет то что надо: Тынц
Отступы, толщину и цвет рамки отрегулируете на своё усмотрение.
Здравствуйте. Сразу хочу извиниться, я вообще почти не в теме css, но очень хочется разобраться. Куда вставляется данный код, как связывается с конкретной ссылкой? Буду благодарен за ответ, возможно порекомендуете что почитать для полного понимания.
Интересный и простой эффект, спасибо Вот только не нравится, что линия распространилась на все ссылки, не только в тексте. Особенно в Меню она лишняя. Как бы ее убрать? )
Конечно распространится, потому как в моём прмере стили подчёркивания прописаны напрямую для тега
<a>
, а значит работать будут для всех ссылок. Вы же можете использовать в качестве селектора определённый класс, например.underline
a.underline { здесь свойства }
и так с каждым селектором эффекта;
затем при написании статьи или в любом другом месте где хотите видеть ссылку с подчёркиванием, просто добавляете нужной ссылке
class="underline"
:<a href="###" class="underline">образец</a>
всё, подчёркивание теперь, будет только у тех ссылок, которые определите вы сами, прописав им
class="underline"
Спасибо, классный код!
Зачет! То что нужно. Спасибо за труд.
В общем, ещё раз зашел поблагодарить автора, всё настроил у себя, как хотел. Метод рабочий. Блог в закладках!
Спасибо за отзыв. Рад, что вам пригодилось.
Да, очень круто! Спасибо)
Супер, огромное спасибо.
Вопрос такой, если надо добавить content > к a:after например, как сделать чтобы они работали вместе
а для чего нужно content:""; ?