Pseudoelements
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.
What is :before and :after?
: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: orange
Compiled CSS:
a { border: 1px solid #000; } a:before { content: "before"; color: orange; } a:after { content: "after"; color: orange; }
The ...
Get Professional CSS3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.