下面是一段CSS代碼:
.box { width: 100px; height: 100px; background-color: #ccc; position: relative; } .box::before { content: ""; width: 20px; height: 20px; background-color: #f00; position: absolute; top: -10px; left: -10px; } .box::after { content: ""; width: 20px; height: 20px; background-color: #0f0; position: absolute; bottom: -10px; right: -10px; }
這段代碼是用來給一個容器添加兩個小正方形背景圖案的。.box是容器的類名,使用了position: relative屬性使得偽元素能夠相對于容器定位。
偽元素通過使用content: ""屬性創(chuàng)建了一個空的元素,然后添加了背景顏色,并通過position: absolute屬性定位到了箱子的左上角和底部右側(cè)。通過使用before和after兩個偽元素,我們得到了兩個小正方形的背景圖案。
如果你想為你的容器添加更多的圖案或者其他的效果,那么這段代碼將非常有用。