My problem and the reason of it:
I have this html:
<div class="container">
List of anchors:
<a href="#" class="child">First child</a>
<a href="#" class="child">Second child</a>
</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"><a href="#" class="child-anchor">First child</a></li>
<li class="child-list"><a href="#" class="child-anchor">Second child</a></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!
