31
loading...
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.
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.
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>Without before element.
with before and after element.
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.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.
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.
31