CSS中的after選擇器用于在選中的元素之后插入內容。它是一個偽元素,不會在DOM中生成對應的元素,只是在指定元素的內容之后添加樣式。after選擇器的語法如下:
選擇器::after {
/* 樣式屬性 */
}
after選擇器可以用于添加文本、圖標、或其他裝飾性的內容。
以下是一些after選擇器的常見用法:
p::after {
content: "后綴";
}
這樣會在p元素內容的末尾添加"后綴"。
.button::after {
content: url(image.png);
}
這樣會在class為button的元素之后添加一個圖標。
h1::after {
content: "";
display: block;
height: 10px;
width: 100%;
background-color: red;
}
這樣會在h1元素之后添加一個紅色的水平線。
需要注意的是,after選擇器生成的內容是在元素內部的最后一個子節點之后插入的,而不是元素本身的最后位置。