CSS content 生成器

输入要显示的内容,并选择挂载到 ::before 还是 ::after,工具会生成带 content 属性的伪元素 CSS 代码,并对引号做转义。全部在浏览器本地完成。

内容设置 等待输入

内容会写入 content 属性,注意伪元素需配合 content 才能显示。

计算结果
字符数—
位置—
输入内容后点击生成,CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • 伪元素 ::before / ::after 需要 content 才会渲染。
  • content 的值若为文本需用引号包裹。
  • 内容中的双引号会被自动转义,避免语法错误。
  • 伪元素默认是行内元素,可用 display 调整。
  • 伪元素不进入 DOM,不影响可访问性内容。