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.

Too Long; Didn't Read

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

What Are :before and :after Pseudo Elements?

Too Long; Didn't Read

Alexandra Mladenovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What Are :before and :after Pseudo Elements?

Too Long; Didn't Read

Alexandra Mladenovic

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES