CSS中的:after偽元素常用于在某個元素內容的末尾插入一些樣式,常用于實現一些特殊的效果。
:after這個偽元素通常是用content屬性來定義的,其前綴是一個冒號,如下所示:
div:after{ content: "關注我,更多精彩等著你!"; }
上面的代碼意思是在div元素的內容末尾插入"關注我,更多精彩等著你!"這個文本,這里需要注意的是,必須要在元素內設置一個“display: block”或“display: inline-block”才可以讓:after偽元素生效。
此外,:after可以和其他CSS屬性一起使用,來實現更多的效果。例如,可以通過設置:after的background-color和position屬性來實現為元素添加一個小圖標的效果:
div::after{ content: ""; background-color: red; position: absolute; width: 10px; height: 10px; left: 10px; top: 10px; }
上面的代碼意思是為div元素的末尾添加一個紅色小方塊,大小為10px * 10px,偏移量為(10px, 10px),這里需要注意的是,position屬性必須設置為absolute才可以讓:after偽元素在元素位置外進行偏移。
總體來說,:after是非常常用的CSS偽元素之一,可以通過它來為元素添加一些特殊的樣式。