Strange difference between ::before and ::after
I was taking a look at this post Make underline effect 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
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,
Observations:
- This appears to only affect
-
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.
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.
