Menu
Well, what the title says.
I really couldn't find any detailed information on it, the MDN documentation is also rather sparse if not useless..
Can you possibly give examples and tips when one is preferred over the other?
(https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
272
The ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
::after (:after) In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
It says the difference is that :after is CSS2, while ::after is CSS3.
The ::backdrop CSS pseudo-element is a box the size of the viewport which is rendered immediately beneath any element being presented in fullscreen mode. This includes both elements which have been placed in fullscreen mode using the Fullscreen API and <dialog> elements.
This pseudo-element is a box rendered immediately below the element (and above the element below the element in the stack, if any), within the same top layer.
As you see in the documentation you mentioned, it will add a new element between your actual element and the element after.
With ::after you can insert content after the content of your selected element (so the content is still add to the same element), see this example.
Pseudo element after documentation:
Insert content before, or after, the content of an element
Over that, there is a difference in what browsers can render the pseudo elements: Backdrop vs. After. As you can see, today (2016-02-19) you can use ::backdrop only in chrome, opera and android browser.
153
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
