ZorNet.Ru — сайт для вебмастера » HTML и CSS » Подчеркивание ссылки другим цветом на CSS

Подчеркивание ссылки другим цветом на 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;}

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

Демонстрация
22 Августа 2018 Просмотров: 1935 Комментариев: (0)

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

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

Оставь свой отзыв

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