CSS after选择器的用法有哪些

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