Currently I have this markup that represents an icon container and some elements styled with CSS inside it that in the end show as graphic icon.
<div class="icon">
<div class="icon-element1"></div>
<div class="icon-element2"></div>
<div class="icon-element3"></div>
</div>
The number of the child elements can be different depending on the complexity of the icon.
What I want is
to somehow move as much as possible
to CSS stylesheet, so that ideally I would have only <div class="icon"></div> and the rest would just render from CSS styles, something close in concept
to :before/:after, a kind of virtual divs. I don't want
to use JavaScript
to add the elements dynamically. It would be possible
to do this if we had multiple :before/:after.
Here is an example of an icon I get by using the markup from above:
As you can see, there are 3 child elements representing gray case, white screen and turquoise button.
Please advise, how I can simplify this markup so that not
to have
to put all the divs each time I want this icon
to be shown.
