偽元素有以下:
::after (:after)
::backdrop
::before (:before)
::cue
::cue-region
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
::marker
::part()
::placeholder
::selection
::slotted()
::spelling-error
初認識偽元素可以參考:
小事之 CSS 偽類 與 偽元素
全都是假的,一起來認識偽元素!
CSS | 全都是假的!關於那些偽類和偽元素 - 基本用法
目前最常使用到的就是 ::before
和::after
,有使用過但較少使用的是::placeholder
偽元素顧名思義就是「假」的元素,不會像 HTML 元素一樣確切的存在網頁內容的結構中
若有使用到 ::before
或::after
偽元素可以發現在 HTML 中他們的位置會放在 HTML 元素內層
另外有一個自己比較少用的但覺得之後可以嘗試用用看的 ::selection
,可以設定用滑鼠反白文字內容時的樣式,可參考 ::selection - CSS: Cascading Style Sheets | MDN
使用上需注意:
偽元素 ( Pseudo-elements ) 常與偽類 ( pseudo-class ) 一起介紹,因兩者在初學時常會搞混,偽元素在語法上會在元素後方接兩個冒號,例如 .item::before
,為了和偽類 ( pseudo-class ) 的一個冒號 ( .item:hover ) 做區別,但是因 W3C 規範在早期沒有這樣的區別,因此偽元素寫成一個冒號 .item:before
也會被瀏覽器接受
因偽元素是透過瀏覽器運算和渲染後才會出現,因此點擊「檢查」開啟 devtool 才會看到,若是「檢查網頁原始碼」就只會出現未經過運算的原始碼,也就是原本撰寫的 HTML
::before
和::after
都需要搭配 content 屬性來產生內容,偽元素才會出現,content 的值可以是空字串 ' '
,例如 範例
<div class="box">
</div>
.box {
width: 300px;
height: 300px;
border-radius: 10px;
background-color: #22333b;
position: relative;
}
.box::before {
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #c6ac8f;
position: absolute;
top: 20px;
left: 20px;
}
由於偽元素 ( Pseudo-elements ) 除了 ::before
和::after
大多不會存在 HTML 結構中,因此較適合使用在視覺上的裝飾,若是有意義的網頁內容,為了要讓瀏覽器能順利辨識網頁結構,不建議使用偽元素來做
如上述,裝飾性的內容適合使用偽元素來製作,相較於把裝飾性的內容用 div 或是 span 等放在 HTML ,形成一個無語意的內容,是較好的做法
參考資料:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
書籍:金魚都能懂的 CSS 選取器