CSS before and After element : Everything you need to know about css pseudo element

Hello, welcome. In this article we'll learn about CSS pseudo-elements.

What is pseudo-elements ?

Pseudo-elements allow you to insert content on the page without writing HTML for it. You can make whole content with CSS. But that content is not actually a DOM element.

:before and :after

Syntax

div:before{
   content: 'this is before element';
}

div:after{
   content: 'this is after element';
}

This is how we make before and after element in CSS. But, How does this will look like in HTML at the end.

<div>
  ::before element

  <element/>

  ::after element
<div>

Let's take a example.

Without before element.

with before and after element.

Content property

Now, for before and after elements content property is very very important. Because, in order to make any pseudo element, you have to give some content. You cannot create element without content. And yes, I am saying this again and again because I forget this thing very often.

Values for content property :

i) a text : content: "this is a text"; you can give text as a content.

ii) image : content: url(image-path); You can also give image to the content. But, you cannot change the image size.

iii) Empty : content: ''; when you don't won't any text or image to show up. You can make it empty. It use a lot to create designs.

: or :: ?

Now, we can make an element with single colon :before or we can use double colon ::before. The only thing, you have to keep in mind is :: double colon is supported by all browsers except Internet explorer 8. So, if you want, internet explorer 8 support. You have to use : colon.

So, that's it about pseudo elements. I hope you understood each and everything. If you have doubt or I missed some point let me know in the comments.

Articles you may found Useful

1. CSS Positions
2. CSS Media Query
3. CSS flex box

And if you want to improve your webdev skills. You can watch tutorial on Disney+ clone clone by me. If you like, you can subscribe my youtube channel, and follow me on instagram. I create awesome web contents. [Subscribe], [Instagram]

Thanks For reading.