::
CSS 伪元素
CSS 伪元素速查（::before / ::after 等）。
本地处理 · 不上传
加载工具中…
相关：CSS伪元素 · pseudo-element · ::before · ::after · placeholder
CSS 伪元素列出 ::before、::after、::placeholder、::selection 等伪元素的用法。它们能在不增加 HTML 的前提下添加装饰内容。
使用步骤
- 确定要生成内容还是给已有部分加样式
- 使用双冒号写法，单冒号是旧语法
- ::before 与 ::after 必须写 content 才会渲染
- 替换元素如 img 上无法使用这两个伪元素
使用场景
- 添加装饰性内容
- 自定义占位符与选中样式
- 实现纯 CSS 的图形效果
- 查找伪元素的正确写法
小贴士
- ::before 与 ::after 必须设置 content 属性才会显示，哪怕是空字符串。这是它们不生效的最常见原因。
- 伪元素的内容不进入 DOM，屏幕阅读器对它的处理不一致。重要信息绝不能只放在伪元素里。
- 自闭合元素（img、input、br）没有内容区，因此不能有 ::before 与 ::after。
常见问题
为什么 ::before 不显示？
最常见的原因是没写 content 属性。伪元素必须有 content 才会生成，即使是空的也要写成 `content: ""`。此外还要确认元素本身不是自闭合标签。
伪元素的内容能被读屏软件读到吗？
各软件处理不一致，不能依赖。装饰性内容放在伪元素里正合适（反正不需要被朗读），但任何有实际含义的信息都必须放在真实的 HTML 中。
为什么 input 加不了 ::after？
因为 input 是自闭合元素，没有内容区域可以容纳伪元素。需要在输入框旁添加图标或标记，只能用外层包裹元素的伪元素，或用背景图实现。
CSS 伪元素是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 伪元素，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。