CSS偽元素(psuedo-element)是一種可在選擇器中添加的虛擬元素,它不在指定的HTML中,但可以被樣式化。CSS3中引入了幾個偽元素,包括::after
、::before
、::first-letter
和::first-line
。
偽元素可以通過CSS樣式選擇器來調用。在選擇器之后,偽元素用一對冒號(::)來引用。例如,要選擇n_ew
的首字母并將其設為紅色,可以這樣寫:
p::first-letter { color: red; }
此代碼會選擇每個
元素的首字母,并對其設置為紅色。偽元素也可以用于在元素的開頭或結尾處插入內容。例如,要在每個
元素的末尾添加一個逗號,可以這樣寫:
p::after { content: ", "; }
在每個
元素的結束標簽之前,會自動添加一個逗號和一個空格。如果你想更改偽元素的樣式特征(提高字號、更改顏色、添加背景等),也可以使用CSS屬性:
p::before { content: "Quote: "; font-size: 14px; color: #999; background-color: #f1f1f1; padding: 5px; }
以上代碼設置了一個
元素的偽元素::before,它包含“Quote: ”文本、14像素的字號、灰色的文本顏色、淡灰色背景和5像素的內邊距。
總之,CSS偽元素可以幫助我們在HTML文檔中插入內容、樣式和結構化元素。熟練掌握CSS偽元素將使您的前端頁面更具有創意和靈活性。