CSS中的::before
又稱為偽元素,它是一個在選擇器匹配元素前面被創建的元素。這意味著在元素內部插入內容,而不是在元素本身的開頭插入內容。以下是一個使用::before
增加內容的例子:
div::before { content: "前面插入的內容"; }
在這個例子中,我們使用了::before
偽元素并將它作用于一個
元素。然后,使用CSS的content屬性為該元素前面添加了文本“前面插入的內容”。需要注意的是,
::before
僅僅是添加了一個偽元素,并沒有創建實際的HTML元素。除了使用text屬性外,::before
還可以通過設置background,border或padding屬性來創建一個元素。以下是一個使用::before
創建一個圓圈形的例子:
div::before { content: ''; display: inline-block; height: 16px; width: 16px; border-radius: 50%; background: black; margin-right: 10px; }
在這個例子中,我們創建了一個空的::before
元素,設置了display:inline-block以確保它與文本在同一行,然后設置高度和寬度為16px,使用border-radius屬性來創造圓形邊框。最后,設置了背景顏色為黑色。這將為
添加一個小黑點。
總之,::before
是CSS中非常有用的偽元素之一,可以為元素添加額外的內容,而不需要改變HTML標記。我們可以使用content,background,border和padding等屬性來創造獨特的效果。
上一篇css()方法
下一篇css 鼠標經過文字突出