溫馨提示×

CSS after選擇器的用法有哪些

css
小億
172
2023-09-05 02:30:40
欄目: 編程語言

CSS中的after選擇器用于在選中的元素之后插入內容。它是一個偽元素，不會在DOM中生成對應的元素，只是在指定元素的內容之后添加樣式。after選擇器的語法如下：

選擇器::after {
/* 樣式屬性 */
}

after選擇器可以用于添加文本、圖標、或其他裝飾性的內容。

以下是一些after選擇器的常見用法：

  1. 添加文本內容：
p::after {
content: "后綴";
}

這樣會在p元素內容的末尾添加"后綴"。

  1. 添加圖標：
.button::after {
content: url(image.png);
}

這樣會在class為button的元素之后添加一個圖標。

  1. 添加裝飾性的元素：
h1::after {
content: "";
display: block;
height: 10px;
width: 100%;
background-color: red;
}

這樣會在h1元素之后添加一個紅色的水平線。

需要注意的是，after選擇器生成的內容是在元素內部的最后一個子節(jié)點之后插入的，而不是元素本身的最后位置。

0 踩