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/

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Active Record Associations in Rails

RSpec Testing: Let Vs. Before

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Active Record Associations in Rails

RSpec Testing: Let Vs. Before

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps