CSS中有很多特殊符號，今天我們要介紹的是“燈泡”（::before和::after偽元素）。

/* 使用:before和:after添加一個(gè)燈泡 */
.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的偽元素，它們可以在元素的內(nèi)容前或后加上樣式。

在上面的代碼中，我們使用.light::before和.light::after添加了一個(gè)燈泡。在:before和:after中，我們添加了一個(gè)虛擬的元素，設(shè)置了其位置和樣式，使其成為一個(gè)燈泡。

可以通過改變燈泡的大小、顏色和位置等屬性以及:before和:after偽元素的樣式來達(dá)到不同的效果。

/* 改變燈泡的位置和顏色 */
.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屬性，我們可以讓燈泡的位置和顏色不同。這個(gè)燈泡更像是一個(gè)打開的燈泡。

總之，使用::before和::after偽元素可以讓我們在元素的前后添加虛擬元素來實(shí)現(xiàn)一些有趣的效果。