ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект подчёркивания слева направо на CSS

Эффект подчёркивания слева направо на CSS

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

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

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

Красивое подчеркивание элементов при помощи CSS

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

HTML

Код

<a class="sekunomug-convesion">Подчеркивание </a>

CSS

Код

.sekunomug-convesion {
  position: relative;
  color: #2d2b2d;
  cursor: pointer;
  font-size: 19px;
}

.sekunomug-convesion:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: #11337b;
  content: "";
  transition: width 0.3s;
}

.sekunomug-convesion:hover {
  color: #103480;
}
.sekunomug-convesion:hover:after {
  width: 100%;
}

Здесь можно ставить на отдельные слова, что в описание устанавливают на переходы.

Демонстрация

05 Октября 2018 Просмотров: 1446 Комментариев: (0)

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

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

Kosten

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