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
Imgur
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
cubiq
cubiq11mo ago
well my guess is that that 1px is being just automatically rounded, instead of height, id try applying border bottom maybe, ill check it
No description
cubiq
cubiq11mo ago
which in fact really does fix it xd
No description
cubiq
cubiq11mo ago
ignore the height, i was playing around with it xd
clevermissfox
clevermissfox11mo ago
I understand, I can find other workarounds but I’m really curious WHY. What do you mean by automatically rounded?
cubiq
cubiq11mo ago
well it's not 1.5px but 1 or 2
clevermissfox
clevermissfox11mo ago
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.
cubiq
cubiq11mo ago
yes
Want results from more Discord servers?
Add your server