偽元素
我們知道隨著CSS規(guī)范進(jìn)一步完善,新增的CSS偽元素越來(lái)越多,但是在日常開發(fā)中,我們常用的及瀏覽器支持情況比較樂(lè)觀的當(dāng)數(shù)before和after了。但是我們?cè)谌粘i_發(fā)中使用的都是:after {content: ”;}來(lái)清除浮動(dòng),及新增一個(gè)元素(照顧到IE8瀏覽器這里使用單冒號(hào))。但是content的可取值有哪些呢?
1. 字符串: content: “a string”- 注意:特殊字符必須使用unicode編碼;
2. 圖片: content: url(/path/to/benjamin.png) – 圖片以原始尺寸插入,不能調(diào)整大小。因圖片支持漸變,因此可以對(duì)偽元素使用漸變效果;
3. 無(wú)字符: content: “”- 這個(gè)在清除浮動(dòng)和設(shè)置背景圖片比較有用,我們可以設(shè)置背景圖片的width和height,甚至我們可以使用background-size屬性來(lái)調(diào)整背景圖片大??;
4. 計(jì)數(shù)器: content: counter(li)- 在:marker出現(xiàn)之前,對(duì)于設(shè)置列表序號(hào)樣式比較有用;具體參見下面代碼:
新聞熱點(diǎn)
疑難解答
圖片精選