Подчеркивание у ссылки при наведении на нее

Question

Подскажите, как сделать такой эффект при наведении на ссылку. Меня интересует как полоску можно настолько опустить, а также как изменять ее размер. Заранее спасибо :)

Answer 1

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

.c {
  display: block;
  position: relative;
  width: 120px;
  height: 120px;
  background-color: gray;
  text-align: center;
  cursor: pointer;
}

.c:hover::after {
  content: '';
  width: 30%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-bottom: solid 4px red;
}

<a class="c">HREF</a>

БЛОГ НА HUSL

Подчеркивание у ссылки при наведении на нее

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