How do I create an un-centered circular css background behind an html element?

Question

I am using a custom font from Fontastic to display icons like you see here:

The icons can only be one color plus transparency, in this case the green you see above.

I want, in some circumstances, to display the 'details' of these icons as white - the way I would like to accomplish this is by placing a white background behind the appropriate part of the icon. The desired end-result:

I have tried adding a background color and using 50% border-radius but I get results like this:

and this (got close using display: inline-block on my icon element):

I feel I am having difficulty because the icon element itself is rectangular and centering the circular background behind the icon seems not possible using the knowledge I have of CSS.

I put up a demo of the icons here (sorry it's not at a 'css fiddle-like' website but I was having difficulty setting that up to match my situation): https://hoplu.com/troubleshooting

Any tips? I feel there is probably a css property I'm not aware of that makes this job much easier, but have been unable to pinpoint one.

Answer 1

What I would do is something like this:

hoplu { 
    position:relative; 
}
hoplu:before { 
    position:relative; 
    z-index:2; 
}
hoplu:after { 
    content:""; 
    position:absolute; 
    z-index:1; 
    border-radius:50%; 
    background:white; 
    left:0; 
    top:0; 
    width:75px; 
    height:75px;
}

This way you're using the :after pseudo-element to generate the white background, and since it has a lower z-index then the :before element (which contains the icon), it will be displayed behind the icon. Change the top, left, width or height of the :after element if needed.