CSS伪元素::before与::after使用方法_添加内容与装饰

新闻中心 NEWS CENTER

2025-11-21

浏览次数：次

::before 和 ::after 通过 content 属性为元素前后添加生成内容，常用于装饰或提示；必须设置 content 才能生效，可插入文本、属性值或图片，默认为行内元素，适用于非自闭合标签，注意不可用于 img 等自闭合元素，且内容不被选中、抓取或读屏设备识别，适合非关键性视觉增强。

css伪元素::before与::after使用方法_添加内容与装饰

CSS伪元素 ::before 和 ::after 是非常实用的工具，可以在不修改HTML结构的前提下，为元素添加额外内容或装饰性样式。它们不会出现在DOM中，而是通过CSS在指定元素的前后插入生成的内容，常用于图标、提示、装饰线等场景。

伪元素 ::before 和 ::after 必须配合 content 属性使用，否则不会显示。content 可以是文本、空字符串、引用属性值，甚至是URL引入的图片。

常见写法示例：

这两个伪元素默认是 inline 元素，可根据需要设置 display 类型，如 block、flex 等。

利用 ::before 或 ::after 可以动态添加说明性文字，提升可读性而不污染HTML。

示例：为链接添加外部链接标识

a[href^="http"]:after {
  content: " (外链)";
  color: #999;
  font-size: 0.9em;
}

这样所有以 http 开头的链接后都会自动加上“ (外链)”提示，便于用户识别。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

结合 border、transform、background 等属性，::before 和 ::after 能创建各种装饰效果，比如引号、三角形、下划线动画等。

常见应用场景：

虽然伪元素功能强大，但使用时需注意以下几点：

基本上就这些。合理使用 ::before 和 ::after 能让页面更简洁、样式更灵活，关键是掌握 content 的用法和定位技巧。不复杂但容易忽略细节。

以上就是CSS伪元素::before与::after使用方法_添加内容与装饰的详细内容，更多请关注其它相关文章！