CSS3的after偽類是一個很有用的選擇器,可以在指定元素的尾部添加額外的內容,而不需要更改HTML代碼進行修改。這個偽類可以用在任何元素中,包括p標簽、div和ul等。而添加的內容可以是文字、圖像、計數器等。
p:after { content: "-"; }
要添加一個簡單的橫線,在p標簽的后面添加以下代碼即可。content屬性定義了添加的內容,這里是一個短橫線。偽元素的默認是顯示為內聯元素,因此需要使用display屬性轉換為塊級元素,這樣才可以添加樣式。
p:after { content: url("image.png"); display: block; }
要添加一個圖像,則使用content屬性來引用圖像的鏈接。與添加文字一樣,需要將偽元素轉換為塊級元素。注意,引用的圖像文件的位置是相對于CSS文件而不是HTML文件的。如果希望引用的圖像居中顯示,可以將text-align屬性設置為center。
p.counter:before { counter-increment: count; content: "Article " counter(count) ": "; }
在添加文字的同時,還可以使用計數器來為每個元素添加唯一的標識符。在這個例子中,我們增加一個計數器,以便為每個p標簽添加一個唯一的文章編號。偽元素的內容使用counter(count)來引用計數器值。