CSS 虛擬 (偽) 元素選擇器 (Selector) 教學範例

CSS

「CSS 虛擬(偽)元素」為較特殊的選擇器,它在網頁中實際有形,但並不是由某個元素定義的局部範圍,例如選取某元素段落的第一行、或者在某元素之前還是之後新增文字內容。

CSS 虛擬 (偽) 元素列表

CSS 虛擬 (偽) 元素列表
選擇器 名稱 說明 CSS
E::first-line 偽元素 E 元素的第一行 1
E::first-letter 偽元素 E 元素的第一個字 1
E::before 偽元素 E 元素之前新增文字內容 2
E::after 偽元素 E 元素之後新增文字內容 2

範例

E::first-line

選取 p 元素的第一行。

CSS:

.first-line::first-line {
    background-color: skyblue;
}

HTML:

<p class="first-line">
    第一行<br>
    第二行<br>
    第三行
</p>

第一行
第二行
第三行

E::first-letter

選取 p 元素的第一個字。

CSS:

.first-letter::first-letter {
    background-color: skyblue;
}

HTML:

<p class="first-letter">我是誰</p>

我是誰

E::before

在 p 元素之前新增文字內容 (須搭配 content 屬性)。

CSS:

.before::before {
    background-color: skyblue;
    content: "在之前產生的內容";
}

HTML:

<p class="before">原內容</p>

原內容

E::after

在 p 元素之後新增文字內容 (須搭配 content 屬性)。

CSS:

.after::after {
    background-color: skyblue;
    content: "在之後產生的內容";
}

HTML:

<p class="after">原內容</p>

原內容

參考

發表留言