content
用于控制 ::before 和 ::after 伪元素内容的工具。
快速参考
| 类别 | 样式 |
|---|---|
| content-<value> | content: <value>; |
| content-(<custom-property>) | content: var(<custom-property>); |
| content-none | content: none; |
示例
基本示例
结合 before 和 after 变体，使用 content-[<value>] 语法来设置 ::before 和 ::after 伪元素的内容：
Higher resolution means more than just a better-quality image. With a Retina 6K display,
Pro Display XDR
gives you nearly 40 percent more screen real estate than a 5K display.
<p>Higher resolution means more than just a better-quality image. With a
Retina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">
Pro Display XDR</a> gives you nearly 40 percent more screen real estate than
a 5K display.</p>
引用属性值
使用 content-[attr(<name>)] 语法，通过 attr() CSS 函数引用存储在属性中的值：
TODO 没有效果
<p before="Hello World" class="before:content-[attr(before)] ...">
<!-- ... -->
</p>
使用空格和下划线
由于 HTML 中空格表示类的结束，请将任意值中的所有空格替换为下划线：
TODO 没有效果
<p class="before:content-['Hello_World'] ..."></p>
如果你需要包含实际的下划线，可以通过反斜杠进行转义：
TODO 没有效果
<p class="before:content-['Hello\_World']"></p>
使用 CSS 变量
使用 content-(<custom-property>) 语法，通过 CSS 变量控制 ::before 和 ::after 伪元素的内容：
<p class="content-(--my-content)"></p>
这只是 content-[var(<custom-property>)] 的一个简写形式，它会自动为你添加 var() 函数。
响应式设计
在 content 工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：
<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>
在 变体文档 中了解更多关于使用变体的信息。