CSS 中的偽元素是可以用來在 HTML 元素的前面或后面插入一些虛擬內容,并將其應用到元素的樣式的。
要設置偽元素,我們需要在元素的選擇器后面使用雙冒號(::)或單冒號(:)來表示偽元素的類型。
.element::before { content: "這是一個偽元素"; }
上面的代碼中,::before
表示在元素前添加偽元素,content
屬性用來定義偽元素的內容。
同樣的,我們可以使用::after
偽元素來在元素后添加一些內容。
.element::after { content: "這是另一個偽元素"; }
需要注意的是,偽元素的content
屬性必須設置,它可以取值為:
- 字符串:可以是普通文本、圖片地址或者內容計數器。
- attr():動態地引用元素的屬性值。
- none:表示不生成偽元素。
此外,偽元素也可以用來實現一些常見的效果,比如清除浮動、制作箭頭、觸發動畫等等。