在CSS中,可以使用偽元素::before
或::after
來創(chuàng)建一個空白列表,這兩個偽元素允許你在元素的內(nèi)容前后插入新的內(nèi)容,如果你想在一個列表項前后添加空白,可以這樣做:
li { position: relative; } li::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1em; background-color: #fff; } li::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 1em; background-color: #fff; }
在這個例子中,::before
和::after
偽元素被用來在列表項li
前后添加空白。position: absolute;
使得偽元素脫離文檔流,top: 0;
和left: 0;
(或right: 0;
)定位偽元素在列表項的上方或下方。width: 100%;
使得偽元素占據(jù)列表項的整個寬度,height: 1em;
設(shè)置偽元素的高度為一個字符的高度。background-color: #fff;
設(shè)置偽元素的背景顏色為白色。
這種方法可以用來創(chuàng)建視覺上看起來像是空白列表的效果,但實際上并沒有增加任何新的列表項,如果你需要在列表中實際添加空白項,可能需要使用其他方法,比如JavaScript或者服務(wù)器端的處理。