Эффект подчеркивания разорванной линией при наведении

Question

Помогите добавить такое же подчёркивание как у Home, двойная линия, которая будет под размер контента. Добавить нужно к a:hover

Answer 1

Градиент Вам в помощь:

a:hover {
  background: linear-gradient(to right,
    #008ed6 calc(50% - 2px),
    #0000   calc(50% - 1px),
    #0000   calc(50% + 1px),
    #008ed6 calc(50% + 2px)
  );
  background-size: 100% 3px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}

a {
  margin: 10px;
  padding-bottom: 5px;
  color: white;
  font-size: 20px;
  font-family: Arial;
  text-decoration:none;
}

body {
  background: black;
}

<a href="#">Home</a>
<a href="#">Features</a>
<a href="#">About</a>
<a href="#">Pricing</a>

Answer 2

Это можно сделать с помощью псевдоэлементов :before и :after.

p.s. улучшил код

body {
  background-color: black;
  margin: 20px;
}

div {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: white;
  font-size: 3vw;
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin-right: 20px;
  padding-bottom: 10px;
  cursor: pointer;
}

a:before,
a:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  height: 2px;
  width: 0;
  background-color: red;
  transition: width 0.4s ease-in-out;
}

.primer1 a:hover:before {
  left: 0;
  width: 50%;
  margin-left: -3px;
}

.primer1 a:hover:after {
  right: 0;
  width: 50%;
  margin-right: -3px;
}

.primer2 a:hover:before {
  left: 0;
  width: 50%;
  margin-left: -6px;
}

.primer2 a:hover:after {
  left: 50%;
  width: 50%;
  margin-right: -6px;
}

.primer3 a:hover:before {
  left: 0;
  right: 0;
  width: 100%;
}

.primer3 a:hover:after {
  right: 50%;
  left: 50%;
  width: 6px;
  background-color: black;
}

.primer4 a:hover:before {
  right: 0;
  width: 100%;
}

.primer4 a:hover:after {
  right: 50%;
  left: 50%;
  width: 6px;
  background-color: black;
}

.primer5 a:before,
.primer5 a:after {
  height: 0px !important;
  background-color: white;
  transition: height 0.4s ease-in-out;
}

.primer5 a:before {
  width: 100% !important;
  background-color: red;
}

.primer5 a:after {
  width: 6px !important;
  right: 50%;
  left: 50%;
  background-color: black;
}

.primer5 a:hover:before {
  height: 2px !important;
}

.primer5 a:hover:after {
  height: 2px !important;
}

<div class="primer1">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Home+Features+About</a>
</div>
<div class="primer2">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Home+Features+About</a>
</div>
<div class="primer3">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Home+Features+About</a>
</div>
<div class="primer4">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Home+Features+About</a>
</div>
<div class="primer5">
  <a href="#">Home</a>
  <a href="#">Features</a>
  <a href="#">About</a>
  <a href="#">Home+Features+About</a>
</div>

БЛОГ НА HUSL

Эффект подчеркивания разорванной линией при наведении

Ответы (2 шт):