9 replies

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

text-transform: capitalize;

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

::after

appears to break the capitalisation on all but the first

<a>

<a>

element.

Observations:
- This appears to only affect

<a>

<a>

tags.
-

text-transform: lowercase;

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.