» »

Подчеркивание ссылки другим цветом на CSS

Подчеркивание ссылки другим цветом на CSS

Теперь можете создать красивый эффект подчеркивание ссылки или название под любым оттенком цвета, где все создается с помощью стиля CSS. Вероятно лучше сразу подметить ключевое слово в статье или в описание, которое установлено под переход на другую страницу, или просто стоит по заданной ссылкой. Здесь и создаем подчеркивание, что делает под любой палитрой цвета, где также идет под один пиксель ширины, но по усмотрению можно сделать шире. Все редактируется в стиле, где только идут заданные значение с закрепленной гаммой цвета.

Если углубиться, то стандартное подчеркивание зависит свойство text-decoration, где идет к нему значение underline, что не будет позволять вам выставить ширину подчеркиваемой полосы, и аналогично оттенка. Но нам нужно обязательно задать тот оттенок к обозначению, что просто заменяем text-decoration, на свойство border-bottom, где у нас появляется доступ к любым значениям.

Вторым этапом, где не указан в название, это создание эффекта, который также будет связан со цветовой гаммой. Где можно аналогично добавить такой трюк, как при наведении будет меняться знаки, а точнее те слова, которые стоят под ссылкой. Что по умолчанию идут в темном, но стоит навести, как становится алым цветом. Но и это еще не все, мы же собираемся переходить, а значить делать клик, то при нем вы может заметите, как аналогично цветовая палитра на всех знаках изменится.

Чтоб было понятно, то изначально раскидал все эффекты на 2 стиля, что можно каждый по отдельности выставить или все вместе.

Приступаем к установке:

HTML

Код
<a href="http://zornet.ru">Здесь ссылка с подчеркиванием под другой оттенок</a>

CSS

Код
a {
  text-decoration:none;
  border-bottom:1px solid #33CC00;
}

Второй стиль CSS

Код
a {color:#4d523f; transition:0.3s;}
a:hover {color:#ea1515;}
a:active {color:#191717;}
a:visited {text-decoration:none;}

Чтоб понять задуманное, то лучше посмотреть как все будет смотреться при рабочем процессе.

Демонстрация
2018-08-22 Просмотров: 334 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar