css 特殊符号灯泡 |透明块css

/* 使用:before和:after添加一个灯泡 */
.light {
position: relative;
height: 50px;
width: 50px;
background-color: #333;
} 
.light::before, .light::after {
content: '';
position: absolute;
border-radius: 50%;
} 
.light::before {
top: -15px;
left: 5px;
width: 20px;
height: 20px;
background-color: #fff;
box-shadow: 0px 0px 10px #fff;
} 
.light::after {
top: -22px;
left: 12px;
width: 6px;
height: 30px;
background-color: #ffdc3c;
transform: rotate(-45deg);
}

这里的::before和::after是CSS的伪元素，它们可以在元素的内容前或后加上样式。

在上面的代码中，大家使用.light::before和.light::after添加了一个灯泡。在:before和:after中，大家添加了一个虚拟的元素，设置了其位置和样式，使其成为一个灯泡。

可以通过改变灯泡的大小、颜色和位置等属性以及:before和:after伪元素的样式来达到不同的效果。

/* 改变灯泡的位置和颜色 */
.light {
position: relative;
height: 50px;
width: 50px;
background-color: #333;
} 
.light::before, .light::after {
content: '';
position: absolute;
border-radius: 50%;
} 
.light::before {
top: -13px;
left: 18px;
width: 20px;
height: 20px;
background-color: #ffdc3c;
box-shadow: 0px 0px 10px #ffdc3c;
} 
.light::after {
top: -20px;
left: 25px;
width: 6px;
height: 30px;
background-color: #d5d5d5;
transform: rotate(-45deg);
}

通过改变top和left属性和background-color属性，大家可以让灯泡的位置和颜色不同。这个灯泡更像是一个打开的灯泡。

总之，使用::before和::after伪元素可以让大家在元素的前后添加虚拟元素来实现一些有趣的效果。