pseudo element thickness varies
So while hovering these links on windows OS and in chrome, the thickness of the pseudo element on the anchor tag hover state varies. It doesn’t seem to depend on the order, sometimes it’s the first, sometimes the last, sometimes first and last, sometimes the middle, sometimes first two etc. cannot find any pattern and on Firefox or on Mac in chrome, they all look to be the same thickness.
Photo of how I see it on windows/chrome https://imgur.com/vmg4cXD
Here’s the code
https://scrimba.com/scrim/cgwPaGf4
Scrimba
Search (cheating)
Learn to code with interactive scrims. Our courses and tutorials will teach you React, Vue, Angular, JavaScript, HTML, CSS, and more. Scrimba is the fun and easy way to learn web development.
7 Replies
well my guess is that that 1px is being just automatically rounded, instead of height, id try applying border bottom maybe, ill check it
which in fact really does fix it xd
ignore the height, i was playing around with it xd
I understand, I can find other workarounds but I’m really curious WHY. What do you mean by automatically rounded?
well it's not 1.5px but 1 or 2
I’m sorry I still don’t understand. I had the height set to 1px yeah?
And just got the video to play, adjusting the line height of the h2 made it jump too???? That’s wild.
yes