Using pseudoelements is really important to omit repeatable code elements that need specific HTML code. The main purpose of pseudoelements is to reduce DOM elements in the HTML code.
:before and :after are pseudoelements that you can add to an HTML element. An element is added as an inline element into a selected element. To get the foundation of before and after pseudoelements, you can draw the HTML code as follows:
<a>Element</a>
And append the SASS code as follows:
a
border: 1px solid #000
&:before
content: 'before'
color: orange
&:after
content: 'after'
color: orangeCompiled CSS:
a {
border: 1px solid #000;
}
a:before {
content: "before";
color: orange;
}
a:after {
content: "after";
color: orange;
}The output of the preceding code is as follows:
