I have a confession to make: I kind of love the ::before and ::after pseudoelements.
They’re like a couple of henchmen along on any styling advent...
For further actions, you may consider blocking this person and/or reporting abuse
One use that
::before
and::after
allows for is also to extend the clickable area of interactive elements such as buttons and links: instead of making an element (say, a card) clickable and having it emulates the link behavior, use an actual anchor tag, set its::after
with absolute positionning so that it wraps the whole element.The benefit is that you keep both your interactivity semantic (as it’s still the link that is clicked) and the browser’s expected behavior (ctrl-click to open in a new tab, etc.).
What's the difference between
:before
and::before
? I use:before
all the time but I'd never seen the double-colon syntax before.There's a bit of a history here... essentially, these were originally shipped with single colons
:before
and:after
. Later, the committees decided they should draw a distinction between pseudo-elements (of which these are) and pseudoselectors, so they::before
and::after
, but browsers would continue to support single.TBH, I typically still use single colon (and I think many folks who started in CSS quite a while ago still do), but when I originally published with that there were some very loud complainers, to the extent that it seemed to be distracting from the point of the article, so I updated to use double in the text.
Ah, that makes total sense. And yeah I've been using
:before
and:after
ever since they became a part of CSS (even before they were widely-supported), so seeing the::
versions caught me by surprise.Anyway, thanks for the clarification! It all makes sense in retrospect, although it still seems weird to me that they decided that there needs to be specific syntax for pseudo-elements vs. pseudo-classes. It doesn't seem likely that they'd ever allow the two to collide, for example...
stackoverflow.com/questions/101817...
There are a bunch of good answers.
TLDR:
::
- pseudo-classes:
- pseudo-elementsI'm not really clear on the distinction of what one does vs. the other, from a practical standpoint, but at least that led me to this explanation of the difference which... seems that it's the other way around?
::
seems to be pseudo-element and:
seems to be pseudo-class.I think what I got from that link is that
::
specifies things that modify the DOM (i.e. a false element) whereas:
specifies things that query against existing objects in the DOM (i.e. a false class), and so I at least kinda-sorta see why that would exist, but it also seems that user-agents are going to have to support:
for the legacy pseudo-elements for quite some time. But this will help me out if I ever run into trouble with a new pseudo-element that a browser correctly distinguishes syntactically.You can actually create a whole website only with pseudo elements (and one html tag) - github.com/scriptex/no-html