温馨提示×

CSS after选择器的用法有哪些

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

0