How to make a line with a hover effect above the previous line?

Question

css

Sorry for the picture quality. There is a dark line at the bottom of the block. But it is necessary that when hovering, a line of a different color appears under the text. And the hover line should overlap the dark one. I could not find information on the Internet. Thanks for answers.

Answer 1

A pseudo-element on top of the border of the parent block
In a simple way https://jsfiddle.net/y9o8eszh/
Positioning options can be different.
Another option https://jsfiddle.net/s201xbu8/

Answer 2

Make a border-buttom on the element you hover over.
The bar below all elements is the parent element's full-length border-bottom.