CSS after选择器的用法有哪些-开发者知识库平台

CSS after选择器的用法有哪些

css

1173

2023/8/13 2:30:40

栏目: 编程语言

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选择器生成的内容是在元素内部的最后一个子节点之后插入的，而不是元素本身的最后位置。

CSS after选择器的用法有哪些