CSS ::after伪元素用于在被选择的元素之后插入由content属性指定的内容。
::after伪元素是一个虚拟元素,它默认是内联元素。它通常配合content属性来一起使用,content属性为该虚拟元素提供内容。
例如,如果你想在一个超链接后面添加一个小图标 ,我们就可以通过::after伪元素来实现。
这是一个超链接通过::after伪元素在后面插入了一个图标。
.with_link_icon:after{
content: url(img/link.png);
}
上面的代码将得到下面的结果:
这是一个超链接通过::after伪元素在后面插入了一个图标。
::after伪元素可以插入任何的内容:文字,图片等。例如下面都是有效的内容:
.element::after {
/* 插入一幅图片 */
content: url(path/to/image.png);
}
.element::after {
/* 插入文字 */
content: "(测试文字...)";
}
.element::after {
/* 插入unicode字符 */
content: "\201C";
}
.element::after {
/* 空内容 */
content: "";
}
另外,content中的内容还可以是一
如果觉得《css after html ::after | CSS属性参考》对你有帮助,请点赞、收藏,并留下你的观点哦!