CSS Podcast - 014: Pseudo-elements
如果畫面上有一篇文章 想要讓第一批信能夠大幅提高掉落上限 該怎麼做呢?
在 CSS 中,您可以使用 ::first-letter
虛擬元素來達到這類設計細節。
p::first-letter {
color: blue;
float: left;
font-size: 2.6em;
font-weight: bold;
line-height: 1;
margin-inline-end: 0.2rem;
}
虛擬元素就如同在不新增更多 HTML 的情況下,新增或指定額外元素。本範例使用 ::first-letter
是許多虛擬元素之一。這些角色具有多種角色,本課程會說明可用的虛擬元素及使用方式。
::before
和::after
「只有」定義 content
屬性時,::before
和 ::after
虛擬元素才能在元素內建立子項元素。
.my-element::before {
content: "";
}
.my-element::after {
content: "";
}
content
可以是任何字串 (即使是空白字串),但請注意,螢幕閱讀器可能會朗讀其他字串。您可以新增圖片 url
,這會插入原始尺寸的圖片,因此無法調整大小。您也可以插入 counter
。
建立 ::before
或 ::after
元素後,即可視需求設定樣式,不受任何限制。您只能在可接受子元素 (含有文件樹狀結構的元素) 中插入 ::before
或 ::after
元素,因此 <img />
、<video>
和 <input>
等元素無法運作。
::first-letter
我們在課程開始時就認識了這個虛擬元素。不過請注意,指定 ::first-letter
時,並非所有 CSS 屬性都能使用。可用的屬性如下:
color
background
資源 (例如background-image
)border
資源 (例如border-color
)float
font
屬性 (例如font-size
和font-weight
)- 文字屬性 (例如
text-decoration
和word-spacing
)
p::first-letter {
color: goldenrod;
font-weight: bold;
}
::first-line
只有在已套用 ::first-line
的元素值為 block
、inline-block
、list-item
、table-caption
或 table-cell
時,::first-line
虛擬元素才能讓您設定第一行文字的樣式。display
p::first-line {
color: goldenrod;
font-weight: bold;
}
和 ::first-letter
虛擬元素一樣,只有部分 CSS 屬性可供使用:
color
background
項資源font
項資源text
項資源
::backdrop
如果您是透過全螢幕模式呈現元素 (例如 <dialog>
或 <video>
),則可使用 ::backdrop
虛擬元素設定背景樣式 (元素和頁面其他部分之間的空間):
video::backdrop {
background-color: goldenrod;
}
::marker
::marker
虛擬元素可讓您設定清單項目的項目符號或編號樣式,或是 <summary>
元素的箭頭樣式。
::marker {
color: hotpink;
}
ul ::marker {
font-size: 1.5em;
}
ol ::marker {
font-size: 1.1em;
}
summary::marker {
content: '\002B'' '; /* Plus symbol with space */
}
details[open] summary::marker {
content: '\2212'' '; /* Minus symbol with space */
}
::marker
僅支援少數 CSS 屬性:
color
content
white-space
font
項資源animation
和transition
屬性
您可以使用 content
屬性變更標記符號。舉例來說,您可以使用這個符號,設定 <summary>
元素關閉和空白狀態的加號和減號。
::selection
::selection
虛擬元素可讓您設定所選文字的樣式。
::selection {
background: green;
color: white;
}
這個虛擬元素可用來設定所有選取文字的樣式,如上述示範所示。也可以搭配其他選取器使用,以更精確的選取樣式。
p:nth-of-type(2)::selection {
background: darkblue;
color: yellow;
}
和其他虛擬元素一樣,您只能使用一部分的 CSS 屬性:
color
background-color
,但不是background-image
text
項資源
::placeholder
您可以在表單元素中新增輔助提示,例如帶有 placeholder
屬性的 <input>
。::placeholder
虛擬元素可讓您設定該文字的樣式。
input::placeholder {
color: darkcyan;
}
::placeholder
僅支援部分 CSS 規則:
color
background
項資源font
項資源text
項資源
::cue
最後一本虛擬元素導覽是 ::cue
虛擬元素。這樣做可讓您設定 WebVTT 提示的樣式,也就是 <video>
元素的說明文字。
您也可以將選取器傳遞至 ::cue
,以在說明文字「內」設定特定元素的樣式。
video::cue {
color: yellow;
}
video::cue(b) {
color: red;
}
video::cue(i) {
color: lightpink;
}
隨堂測驗
測驗您對虛擬元素的相關知識
下列何者不是虛擬元素?
::before
content: '';
」。::first-paragraph
::after
content: '';
」。::marker
::pencil
:active
您可以在 HTML 檔案中找到虛擬元素。