Strange difference between ::before and ::after
I was taking a look at this post https://discord.com/channels/436251713830125568/1115936302458736711/1115936302458736711 by @Pat66 regarding an issue they were having with a pseudo element.
Asides from their issue (which @mannix_ quickly provided a solution for) I noticed something else. Pat66 had set
text-transform: capitalize; on the "a" tag. This worked correctly on the first link but not on the second link.
If I removed the pseudo after element the capitalise worked as expected. This led me to assume that something was broken in the CSS of the pseudo element however, if I changed it to a "::before" rather than an "::after", the capitalisation worked correctly.
In summary, ::after appears to break the capitalisation on all but the first <a> element.
Observations:
- This appears to only affect <a> tags.
- text-transform: lowercase; works as expected (I haven't tried other variations)
Does anybody know why this might be?
It is probably something obvious but I can't see it...
I have set up a bare-bones codepen to demonstrate the issue: https://codepen.io/cbolson/pen/BaGaxdv
This is not something that I need to resolve, I just found it interesting.4 Replies
it seems to be a firefox issue in chrome it works as expected dunno about safari
ah, good point... I didn't test it in Chrome...
beginners mistake 🤦♂️
(Firefox) Interestingly, if I place some text in the content of the pseudo element, this does get the capitalisation (which I would expect as it is inherited)
That might be worth filing a bug report for
Really strange
I did a quick search and didn't see anything, so you could basically use what you wrote here and file one: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&_gl=1*1ckts7z*_ga*MTkxMjM5MjAyMC4xNTg1ODQyMjgz*_ga_2VC139B3XV*MTY4NjE2NzI4My4yLjAuMTY4NjE2NzI4My4wLjAuMA..
Thanks for looking into that @Kevin I couldn't find anything either. I'll file that 🪲
Update - this has been confirmed as a bug, It appears to be related to lack of whitespace between elements (not only in the case of a pseudo element).
https://bugzilla.mozilla.org/show_bug.cgi?id=1837272