The anchors element move up when i use overflow property [duplicate] - html

Question

This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
My problem and the reason of it:
I have this html:
<div class="container">
List of anchors:
First child
Second child
</div>
and these styles:
.child {
text-decoration: none;
color: red;
overflow: hidden;
display: inline-block;
}
But, for some reason, the anchors it strangely moves up, you can see it here.
And, I found out that this problem happens because of the overflow property, i tried to remove it and this is what I get, which also what I expected. But of course, I really need the overflow property, so I can't move on without it.
The reason I need to use the overflow property:
I want to use it because I want to make the effect, when I hover each anchor, there will be a line under it moves from left to right.
So I will use the ::after pesudo element, translate it 100% (transform: translateX(-100%)) to the left and when hover it, it would move back to 0% (transform: translateX(0%)). So the overflow property would hide the ::after pesudo element when it translate 100% to the left.
What I tried:
I tried to use the ul element instead, an wrap each anchors into each li element:
<ul class="list">
List of anchors:
<li class="child-list">First child</li>
<li class="child-list">Second child</li>
</ul>
.child-anchor {
text-decoration: none;
color: red;
display: inline-block;
overflow: hidden;
}
.child-list {
display: inline-block;
list-style-type: none;
}
But, that it still moves up.
What I want to know:
I want to know why this weird problem happens, and also the way to fix it, or some other ways to make the effect that I mentioned in the The reason I need to use the overflow property section. So hopefully, you guys can help me with this and thank you so much for spending time reading this question!

Answer 1

Have you tried :
vertical-align: middle;