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.