css3写wifi图标 |css label超出裁剪

.wifi {
width: 30px;
height: 30px;
position: relative;
}
.wifi:before,
.wifi:after {
content: "";
display: block;
border-radius: 50%;
position: absolute;
}
.wifi:before {
background-color: #ccc;
top: 0;
left: 0;
width: 20px;
height: 20px;
}
.wifi:after {
background-color: #fff;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
}

首先，大家定义了一个名为“wifi”的class，给该元素设置了一个宽度和高度，并将位置设为相对定位（relative）。接下来，大家使用伪元素:before和:after来绘制圆形图标。

在:before中，大家设置了一个灰色的背景颜色，并把它的位置设为在“wifi”元素的左上角。然后，大家将它的宽度和高度设为20px，使它比整个图标要小一些。

接下来，在:after中，大家设置了一个白色的背景颜色，并将它的位置设为在“wifi”元素的中心。然后，大家将它的宽度和高度设为10px，以使其与之前设置的圆形重叠。

最终，大家得到了一个简单的WiFi图标，可以在网页中使用。