CSS 生成内容
CSS 生成内容模块定义了如何通过 CSS 替换元素的现有内容,以及如何在文档中添加新内容。
生成内容可用于内容替换,在这种情况下,DOM 节点的内容将替换为 CSS <image>。CSS 生成内容还支持生成特定语言的引用,创建自定义列表项编号和项目符号,以及通过在选定的伪元素上生成内容作为匿名替换元素来在视觉上添加内容。
生成内容的应用实例
此示例的 HTML 是一个单独的、空的 <div>,位于一个空 <body> 内部。雪人是用 CSS 图像和 CSS 背景和边框创建的。胡萝卜鼻子是通过生成内容添加的:一个空盒子,在 ::before 伪元素上添加了宽橙色 左边框。文本也是生成内容:“只有一个 <div>”是通过应用于 ::after 伪元素的 content 属性生成的。
点击上方示例中的“播放”按钮,可以在 MDN Playground 中查看或编辑代码。
参考
属性
CSS 生成内容模块还引入了四个待定属性:string-set、bookmark-label、bookmark-level 和 bookmark-state。目前,没有浏览器支持这些功能。
函数
CSS 生成内容模块引入了六个尚未实现的 CSS 函数,包括 content()、string() 和 leader(),以及三个 <target> 函数 target-counter()、target-counters() 和 target-text()。
数据类型
指南
- 生成内容的“操作指南”
-
了解如何使用
content属性向文档添加文本或图像内容。 - 使用生成内容创建精美盒子
-
生成内容样式用于视觉效果的示例。
相关概念
-
CSS 伪元素模块
-
counter()函数counters()函数counter-increment属性counter-reset属性
-
CSS overflow 模块
::scroll-button()伪元素::scroll-marker伪元素:target-current伪类
-
CSS 值和单位模块
规范
| 规范 |
|---|
| CSS Generated Content Module Level 3 |
另见
- CSS 伪元素模块
- CSS 列表和计数器模块
- 替换元素