The CSS properties are what also known as . They are used to add something before or after the content of an element. There are a lot of great uses for these pseudo elements, and we are here to explore some of them. :before and :after pseudo elements The Syntax If we have an element like this one: welcome to our website < > h2 </ > h2 We can add a pseudo element before it using CSS, like this: { : “Hello“; : blue;
} h2 :before content color The result will be: This is a quite simple principle. You are adding content before or after a certain element. It can be extremely helpful when , and in many other cases. adding icons, clearing floats The property of the pseudo element can be left with empty quotes like this .  This way you can treat the pseudo element like a . If the content property is removed altogether, the pseudo element content empty `content: “”` box with no content will not work. Adding Icons Probably the most popular usage of the before and after pseudo elements is using them to . We can add a simple .png icon. add icons Let’s look at the markup. HTML Weather report < > h2 </ > h2 CSS { : “ ”; : block; : ; : ; : (‘images/icon.png’’); : ; h2 :before content display height 15px width 25px url margin-right 5px The result: Now we have successfully added an icon before the text. Easy, right? Clearing Floats After elements are , another one needs to be added in order to clear that float. You can and simply using a pseudo one. floated avoid adding a new element Let's say we have this situation: We can use the next code to achieve clearing of the floats. HTML Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table. < = > div class "box-container" < = > div class ”box” </ > div < = > div class ”box” </ > div </ > div < > p </ > p CSS , { : ; : block;
} { : both;
} { : ; : ; : ; : ; : left;
} .box-container :before .box-container :after content "" display .box-container :after clear .box height 100px width 100px background-color #C98EED margin 5px float Now, let's take a look at the result. By using this method we are and the paragraph is moved below the two elements. clearing the float Using a Background Image We can also to a pseudo element. This is commonly used when styling a header. add a background image HTML Hello World < > h2 </ > h2 CSS { : “”; : ; : ; : (‘underline.png’) center center no-repeat; : block;
} h2 :after content width 100% height 30px background url display The result achieved: Browser Support As with everything else in CSS, browser support needs to be checked. By consulting the , we see that these pseudo classes have a high browser support ( ) and we won’t have a headache when using them. CanIUse over 98% Summary Here, we have explained of the CSS pseudo elements. The examples illustrate just some of the many possible usages. Don't worry if it's not completely clear in the beginning. A little practice goes a long way. basic principles Hopefully, this article will help with any future projects. Thank you for reading! Previously published at https://kolosek.com/css-before-and-after/

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to use CSS pseudo-classes :before and :after

Too Long; Didn't Read

Nesha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to use CSS pseudo-classes :before and :after

Too Long; Didn't Read

Nesha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES