content

示例

基础示例

使用 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>

引用属性值

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

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

处理空格和下划线

由于 HTML 中空格表示类的结束，请将任意值中的空格替换为下划线：

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

如果需要包含实际的下划线，可以通过反斜杠进行转义：

<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() 函数。

响应式设计

Prefix a content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.