CODEWITHSUNDEEP
css
Yarin
Yarin

Reputation: 183519

Strange use of CSS ::before, ::after

Saw this bit of CSS in a Sitepoint example (from this article), and can't understand what it's supposed to do. Obviously the first selector applies the box-sizing style to everything, but I don't understand the use of ::before/::after in this case. I know those are used to add content before or after a given element, but what purpose does it serve here?

*,
*::before,
*::after {
    box-sizing: border-box;
}

Upvotes: 1

Views: 680

Answers (3)

A.B
A.B

Reputation: 20445

thats the old implementation of :

The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element

the : is used for :before and :after pseudo-elements which together with the content: allow you to put something for example an image or icon etc before/after every selector you specified

So, here you are selecting everything and applying box-sizing property and style before and after it, as * does not include psuedo-elements

Upvotes: 2

somethinghere
somethinghere

Reputation: 17340

This will force any ::before or ::after element to use the box-sizing property as well, as you can shape them as if they are boxes. The * does not include these pseudo-elements, so *::pseudo will do that for you.

Upvotes: 7

Liglo App
Liglo App

Reputation: 3819

The selector means:

apply to all elements, apply to contents before each element, and apply to contents after each element.

Upvotes: 0

Related Questions