Как сделать нижнее подчеркивание посередине?

Question

Всем привет. Нужно сделать вот такую штуку(желтую линию):

https://i.stack.imgur.com/0k91s.png

Делал вот так:

.hover_line:after{
content: '';
display: none;
position: relative;
left: 0;
bottom: 9px;
width: 100%;
background: rgba(255, 204, 0, 0.5);
height: 8px;
z-index: -1;
}
.hover_line:hover:after{
display: block;
}

Получается вот так. Ссылка не во всю ширину, а сама линия во всю:

https://i.stack.imgur.com/j5819.png

Answer 1

div { 
  display: inline-block;
  position: relative; 
  font-size: 96px;
}

div::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background-color: yellow;
  z-index: -1;
  transition: height .2s linear;
  will-change: height;
}

div:hover::before { height: 50%; }

<div>Text</div>

Answer 2

Попробуй

    .hover_line:hover:after{
   display: inline-block;
    }

Answer 3

Пример

.link {
  display: inline-block;
  font-size: 2rem;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  background: no-repeat left, 100% 100%;
  background-image: linear-gradient(0deg, rgba(255, 204, 0, .5) 50%, rgba(255, 204, 0, 0) 0), linear-gradient(0deg, rgba(255, 204, 0, 0) 50%, transparent 0);
  background-size: 0 100%, 100% 100%;
  transition: .3s linear;
}

.link:hover {
  background-size: 100% 100%, 100% 100%;
}

<a href="#" class="link">
  Text link
</a>

БЛОГ НА HUSL

Как сделать нижнее подчеркивание посередине?

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