What are div::before and div::after? How do we use them ?

Do you still have questions about the pseudo-elements div::before and div::after? If so, don't worry; I didn't understand it either when I was learning CSS or when I saw coding tweets where many developers showed tutorials on how to make this and that using only HTML and CSS. Sometimes I'll see ::before and ::after in the code, but I was confused and didn't understand it at the time, so I looked it up and learned more about pseudo-elements.

I struggled to understand this at the time, because some of the articles I read did not provide an explanation that was simple enough for me to understand, so I tried to practice it myself to find the answer. That is why I wrote this article and attempted to provide an explanation that I hope my friends who read it will understand.

Without further ado, let's go over ::before and ::after and how to use them.

What are ::before and ::after ?

::before & ::after is a pseudo-element that allows us to add new content that is located before / after the element we created in our html document by simply going through css only.

How do we use them in CSS ?

The basic example and to make it more understandable, you can see in the 1st image, I have a sintax html with <div>Hello</div> that I styled with CSS as shown in the 2nd image and you can see the results shown in 3rd image.

Then in 4th image, I tried to add div::after in css which contains the property [ content: "....."; ] which I fill with text "Twitter",

then you can see the result will be 'Hello Twitter', where because I use ::after, so the words 'Twitter' will be added after the div tag (<div>Hello</div>) I created.

Similarly, if I add ::before with the content property containing "Hi, ",

it will now look like this. The text 'Hi' will appear before the (<div>Hello</div>) I created.

So, using div::before and div::after, we can easily add something before and after the <div> element we create.

We can add more than just text, image or others and the benefits are numerous, but I will only cover the basics here, such as when we want to make a shape.

In this example, I'll make an empty div in html with the code <div><div> and the css style shown in the image below.

then you can see the result will be like this. The result will look like the image below. I were able to make a lightgreen rectangle shape using that code.

Following that, I'll add div::before and div::after to our style.css code, such as the following

Then, using the following code, we set the position of the div::before on the top left and the position of the div::after on the bottom right.

The result will look like this, with the red rectangle we created using div::before being on the top left and the orange rectangle we created using div::after being on the bottom right.

Summary

If you want to add some extra content before or after a div, you can use the div::before and div::after pseudo-elements. These elements are generated by the browser and don't require any additional HTML markup.

To use them, simply add the ::before or ::after pseudo-elements to the div selector. Then, inside the pseudo-elements, you can insert whatever content you want.

For example, say you have a div with the class of "container" :

.container {
    width: 100%;
}

Then you want to add a few texts before div, then you can use ::before pseudo-elements

.container::before {
    content: "Some text before the div";
}

and if you also want to add an image after div, then you can use ::after pseudo-elements

.container::after {
    content: url(image.jpg);
}

•••

That's all I have to say about ::before and ::after in this article. Thank you for taking the time to read this article. I hope it's helpful to those who read it and helps reader friends understand div::before and div::after.

Please let me know if this article was helpful, and if you have any additional explanations for ::before and ::after, please leave them in the comments section so that your friends can learn as well. That's all, and thank you.

Let's study together every day! ~ ✨🚀

I hope to see you again in my next blog. Take care of yourself and continue to learn until then ~ 👋💙

•••

---

Did you find this article valuable?

If you liked this article, please like, comment and share this article.

Find and connect with me on social media : Dita Izaty

---