::before
and ::after
are CSS pseudo elements. They can add content before or after that element. This is the syntax
.class::after {
content: "some content"
}
This can be used with pseudo classes to add content when an event occurs. In the example below text is added when there is a hover event.
The ::before and ::after pseudo elements can also be added with no content content:""
and can be used to add styles to the document. The below example shows how you can add a border when hovering with ::after
and the transition
property.
What else can you do with ::before
and ::after
? Leave a comment below
Top comments (5)
Good stuff. I sometimes use pseudo elements to add icons from Font Awesome to menu items.
That's a great idea 🙌
I didn't know that. Thanks for your reply 👍
a proper description would be helpful for begginers.
Here' the Complete CSS Guide for beginners and not so beginners. 😁