CSS 中有一個偽類叫做 after,常用于在文本或元素后面添加一些樣式。通常情況下,after 偽類需要配合 content 屬性使用。
.item:after { content: ">>"; /* 添加內容 */ font-size: 18px; color: #999; vertical-align: -1px; margin-left: 5px; }
上面的代碼中,選擇器選擇了元素的 after 偽類,并為其添加了一些樣式。在 content 屬性中,添加了一個右箭頭字符,表示要在元素后面添加這個字符。
除了添加文字之外,after 偽類還可以添加其他元素,比如圖片、圖標等。例如在一個鏈接后面添加一張外鏈圖標:
.link:after { content: url('link.png'); /* 添加圖片 */ margin-left: 5px; vertical-align: middle; }
上面的代碼中,選擇器選擇了鏈接的 after 偽類,并為其添加了一張外鏈圖標。圖標通過 content 屬性的 url() 方法進行指定。
需要注意的是,after 偽類生成的元素默認是行內元素,因此需要通過樣式修改為塊級元素,并為其設置寬和高,才能夠為其添加一些元素。代碼如下:
.item:after { content: ""; /* 添加元素 */ display: block; width: 30px; height: 30px; background-color: #ccc; }
上面的代碼中,選擇器選擇了元素的 after 偽類,并為其添加了一個長方形的元素。通過 display 屬性將其修改為塊級元素,并為其設置一些屬性,使得其顯示正確。
上一篇css把溢出的隱藏