如何在html元素后面创建不居中的圆形CSS背景？

Question

我正在使用Fontastic中的自定义字体来显示图标，如您在此处看到的：

图标只能是一种颜色加上透明度，在这种情况下，您将看到上面的绿色。

在某些情况下，我希望将这些图标的“详细信息”显示为白色-我想实现此目的的方法是在图标的适当部分后面放置一个白色背景。 所需的最终结果：

我尝试添加背景色并使用50% border-radius但是得到如下结果：

这（使用display：inline-block在我的图标元素上关闭）：

我感到有困难，因为使用我对CSS的了解，图标元素本身是矩形，并且将圆形背景居中放置在图标后面似乎不太可能。

我在这里放了一个图标演示（很抱歉，它不在“ css提琴式”网站上，但是我很难根据自己的情况进行设置）： https : //hoplu.com/troubleshooting

有小费吗？ 我觉得可能有一个css属性，我不知道该属性使此工作容易得多，但无法查明。

Answer 1

我要做的是这样的：

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;
}

这样，您将使用：after伪元素生成白色背景，并且由于其z-index值比：before元素（包含图标）低，因此它将显示在图标后面。 如果需要，更改：after元素的顶部，左侧，宽度或高度。