Height of after pseudo-element not matching original height of element acting upon
Hello guys, sorry to disturb you all; can someone explain why the height of my after pseudo-element is not the same as the height of my li block even though height has been set to 100% please, here is my codepen:
https://codepen.io/Fakeur/pen/poMWrbz
7 Replies
looks like it's from the
margin-bottom: 20px; on your link element?hmm but how would margin affects the height here please
the
margin-bottom on the a is adding to the overall height of the liyeah I remove it and see, all works fine but I'm still confuse, why adding margin-bottom caused that? Also, was it possible to know that using the dev tools please
yep, dev tools is how I found it. The margin gets highlighted a different color than the rest of the element when you inspect it.
hmm here's what I have
the margin is the transparent orange-ish color. It looks like you moved it to the li