iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

學習 HTML / CSS 遇到的問題 系列 第 28

關於偽元素 ( Pseudo-elements )

  • 分享至 

  • xImage
  •  

偽元素有以下:

		::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 選取器


上一篇
關於 position 屬性
下一篇
關於偽類 ( pseudo-class )
系列文
學習 HTML / CSS 遇到的問題 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言