Как стилизовать ссылку в css чтобы подчеркивание при наведении на ссылку было на некотором расстоянии снизу?

Question

[bessard]

Здравствуйте!
Нужна помощь в стилизации активных ссылок - в наличии горизонтальная линия на всю ширину макета которую выполнил через .
Нужно что бы при наведении на ссылку активная область была также продублирована на этой линии.

прикрепил ТЗ.

Я так понимаю что нужно делать через hover?
Спасибо за помощь!

Answer 1

[Евгений Щербаков]

Один из вариантов - добавить padding-bottom и подчеркивание сделать через border-bottom (вместо underline)

a {
   padding: 10px;
   border-bottom: 1px solid transparent;
   text-decoration: none;
}

a:hover {
   border-bottom: 1px solid #fff;
   text-decoration: none;
}

Answer 2

[bessard]

я сплошную линию сделал через тег hr
это не повлияет на стилизацию?

Comments

[Антон Литвиненко]

а я б сплошную линию сделал бы через бордер боттом у шапки