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, so let’s explore some of them. :before and :after pseudo elements The Syntax If you have an element like this one: <h2>welcome to our website</h2> You can add a pseudo element before it using CSS, like this: h2:before { content: “Hello“; color : blue;} 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 . You can add a simple .png icon. add icons Let’s look at the markup. HTML <h2>Weather report</h2> CSS h2:before { content: “ ”; display: block; height: 15px; width: 25px; url: (‘images/icon.png’’); margin-right: 5px;} The result: Now you have successfully added an icon before the text. Easy, right? After elements , another one needs to be added in order to clear that float. You can and simply using a pseudo one. are floated avoid adding a new element Let’s say you have this situation: You can use the next code to achieve clearing of the floats. HTML <div class="box-container"> <div class=”box”></div> <div class=”box”></div></div><p>Lorem ipsum dolor amet truffaut kombucha roof party iPhone forage farm-to-table.</p> CSS .box-container:before,.box-container:after { content: ""; display: block;} .box-container:after { clear: both;} .box { height: 100px; width: 100px; background-color: #C98EED; margin: 5px; float: left;} Now, let’s take a look at the result. By using this method you are and the paragraph is moved below the two elements. clearing the float Using a Background Image You can also to a pseudo element. This is commonly used when styling a header. add a background image HTML <h2>Hello World</h2> CSS h2:after { content: “”; width: 100%; height: 30px; background: url(‘underline.png’) center center no-repeat; display: block;} The result achieved: Browser Support As with everything else in CSS, browser support needs to be checked. By consulting the service, you can see that these pseudo classes have a high browser support ( ) and you won’t have a headache when using them. Can I Use over 98% In this article, I have explained of the CSS pseudo elements. The examples illustrate just some of the many possible usages. Dont’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! Originally published at kolosek.com on May 17, 2018.
