content

示例(Examples)

基本示例(Basic example)

使用 content-[<value>] 语法，以及 before 和 after 变体，来设置 ::before 和 ::after 伪元素的内容：

<p>Higher resolution means more than just a better-quality image. With aRetina 6K display, <a class="text-blue-600 after:content-['_↗']" href="...">Pro Display XDR</a> gives you nearly 40 percent more screen real estate thana 5K display.</p>

引用属性值(Referencing an attribute value)

使用 content-[attr(<name>)] 语法通过 attr() CSS 函数引用存储在属性中的值：

<p before="Hello World" class="before:content-[attr(before)] ...">  <!-- ... --></p>

使用空格和下划线(Using spaces and underscores)

由于空格表示 HTML 中类的结尾，因此用下划线替换任意值中的任何空格：

🌐 Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

<p class="before:content-['Hello_World'] ..."></p>

如果你需要包含一个实际的下划线，你可以通过用反斜杠转义它来做到这一点：

🌐 If you need to include an actual underscore, you can do this by escaping it with a backslash:

<p class="before:content-['Hello\_World']"></p>

使用 CSS 变量(Using a CSS variable)

使用 content-(<custom-property>) 语法，通过 CSS 变量控制 ::before 和 ::after 伪元素的内容：

<p class="content-(--my-content)"></p>

这只是 content-[var(<custom-property>)] 的简写，会自动为你添加 var() 函数。

响应式设计(Responsive design)

在 content 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

<p class="before:content-['Mobile'] md:before:content-['Desktop'] ..."></p>

请参阅 变体文档 详细了解如何使用变体。