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

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

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

Пример

<!— Ссылка —>
Lorem Ipsum
<!— Текст —>

Lorem Ipsum

HTML


<!-- Ссылка -->
<div class="crossed"><a href="#" class="crossed-link" title="">Lorem Ipsum</a></div>
<!-- Текст -->
<div class="crossed"><p class="crossed-text">Lorem Ipsum</p></div>

CSS


/* Ссылка */
a.crossed-link {
  color: #f66d52; /* Цвет сылки */
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 1em;
  position: relative;
  display: inline-block;
}
a.crossed-link:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px; /* Высота зачеркивающей линии */
  background: #666; /* Цвет зачеркивающей линии */
  top: 45%;
  animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover a.crossed-link:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

/* Текст */
p.crossed-text{
  color: #ffa000; /* Цвет текста */
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1em;
  position: relative;
  display: inline-block;
}
p.crossed-text:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px; /* Высота зачеркивающей линии */
  background: #666; /* Цвет зачеркивающей линии */
  top: 45%;
  animation: out 0s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}
div.crossed:hover p.crossed-text:before {
  animation: in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both;
}

/* Анимация */
@keyframes in {
  0% {
  width: 0;
  left: 0;
  right: auto;
  }
  100% {
  left: 0;
  right: auto;
  width: 100%;
  }
}
@keyframes out {
  0% {
  width: 100%;
  left: auto;
  right: 0;
  }
  100% {
  width: 0;
  left: auto;
  right: 0;
  }
}
@keyframes show {
  0% {
  opacity: 0;
  transform: translateY(-10px);
  }
  100% {
  opacity: 1;
  transform: translateY(0);
  }
}
By julia