*,::before,::after {}

Hey guys, even though I have studied about " ::before ::after " pseudo elements, I have no idea when they were used with * like below image1. What is the difference between image 1 and image2 ?

Image1
image

Image2
image

they have covered all about sudo elements including before and after.
read this first, if you still don’t get it then i will try to explain in my way.

I’ve read and watched video about Pseudo-elements and I know how to use them with another tags/elements. But I have no idea what is different between image 1 and image2??
How things would be changed if I don’t use them ? Can you explain?? Cuz I haven’t found any differences even when I didn’t use them…

The ::before pseudo-element can be used to insert some content before the content of an element.
and syntax is

selector::before{
          content : any content you want;
}

example

h1::before {
  content: url(smiley.gif);
}

here i am trying to add image before my h1 element
and for after which is opposite to before

but in your case * is universal selector which means you are selectiong all elements of html page .
and i don’t get it why you are using before and after sudo elements for universal slector so

long story short there is no logic to use before and after sudo element for universal selector and about difference there is no difference because the whole thing is wrong

1 Like

Hi, quite new here, maybe that’s what you are looking for: https://stackoverflow.com/questions/31317238/why-use-selector-in-combination-with-before-and-after

1 Like