::after and ::before in CSS

One month before, I didn't knew about these ::after and ::before pseudo elements so i used to make an extra div if i wanted to include anything before a particular div. For example, if i wanted to underline a div without using border, or overlay a light image with dark background so that my light text is clearly visibile on light image, i usually do that by making another div which does not contain any content in it, just some background color and other styling. So it made my code look ugly, trust me if you want to have that overlay in many images, it would really make your code look poor as it would contain unnecessary markup in html, only for styling.

So what i do in my free time is just find any good website with some great looking animations but still simple and pretty clean, and start making a copy of it. First i try myself and then look for their css in dev tools. It's a really really good practice to learn some extra skills in css and html. I learn a lot of great css properties. It increases your knowledge, like i recently was making a website https://realestate01.vercel.app by copying it from https://adigedesign.com and then i see they have used font-smoothing: antialiased; which i then searched on google, so i found out it was used earlier to smoothen the text and make it sharp on a webpage but now it's a not a web standard and mdn highly recommend to NOT use it in production at all. So these are the things that you can also learn while trying to make a copy of website in your free time.

In this website i have also used ::after in some images so that the text is clearly visible over image. Let's say you have a div which contains an image and a text over that image. It will look like this

However if i use ::after on the div to make a slightly dark background, it will look like this

Did you notice the slightly dark background of the second image? And i haven't even touched the html, it's just pure css.

Wanna see the code?

div {
    position: relative;
}
div::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background-image: linear- 
    gradient(transparent, rgba(0,0,0,0.6));
}

Let me explain it to you. The div that contains image is the div in the css code above. Relative position is required so that the child of this div even pseudo child, will be positioned according to this div.
content is an empty string because we don't want to put any text after the div. Anyways it's a lot better and efficient than using an empty div in the html. Agreed?? The ::after is given position absolute because we want it to overlap. Height is 40% because we don't want to overlap it completely. Height 40% should start from the bottom that's why bottom is 0. Background image, you can use anything but i am using linear gradient.

I hope now power of ::after and ::before is clear to you.