What does *: before and *: after do in css

Question

I researched SO about * (Asterisk) , and I found that it selects all the elements and applies styles to them.

I followed this link Using Asterisk , and I noticed that this code will apply border to all elements.

 * { border: 1px solid red; } 

Now, my concern is what *:before and *:after in CSS?

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

Answer 1

Like their name, these: before and: after are used to apply the css JUST properties before / after the WITHIN content of the corresponding element.

Once a wise man said: "One violin is worth a thousand words," therefore:

 div { border: solid 1px black; padding: 5px; } div:before { content: "Added BEFORE anything within the div!"; color:red; } div:after { content: "Added AFTER anything within the div!"; color:green; } 

 <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> <div>Div 4</div> 

Answer 2

: before the selector inserts something in front of the contents of each selected element (s). : after the selector inserts something after the contents of each selected item (s).

so *: before, as Dan White said, before all elements and *: after all elements

Answer 3

:after - a pseudo-element that allows you to embed content on a page from CSS (without the need for HTML). Although the end result is not actually in the DOM, it appears on the page as if it were, and essentially would be:

 div:after { content: "hi"; } <div> <!-- Rest of stuff inside the div --> hi </div> 

:before exactly the same as soon as it inserts the content before any other content in the HTML instead. The only reasons to use one over the other:

• You want the generated content to appear in front of the content of the element, positionally.
• The content :after also “after” in the original order, so it will position on top of :: earlier if they are naturally stacked on top of each other.

The value for the content may be:

• String: content: "a string"; - special characters must be specifically encoded as a unicode object. See the glyphs page.
• Image: content: url(/path/to/image.jpg); - The image is inserted into its exact dimensions and cannot be resized. Since things like gradients are images, a pseudo-element can be a gradient.
• Nothing: content: ""; - Useful for clearfix and pasting images as background images (set width and height and can even resize with background size).
• Counter: content: counter(li); - Really useful for style lists until a marker appears.

Please note that you cannot embed HTML (at least it will display as HTML). content: <h1>nope</h1> ;

Answer 4

You say that all pseudo-elements will have the same box model behavior as the regular elements present in your DOM . ::before and ::after are pseudo-elements, which means that they are not in the DOM , and you cannot select them with the mouse.