内容

示例

基本示例

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

<p>更高的分辨率意味着的不仅仅是图像质量的提升。使用
Retina 6K 显示器，<a class="text-blue-600 after:content-['_↗']" href="...">
Pro Display XDR</a> 为您提供了比 5K 显示器多近 40% 的屏幕空间。</p>

引用属性值

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

<p before="你好，世界" class="before:content-[attr(before)] ...">
  <!-- ... -->
</p>

使用空格和下划线

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

<p class="before:content-['你好_世界'] ...">
  <!-- ... -->
</p>

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

<p class="before:content-['你好\_世界']">
  <!-- ... -->
</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-['移动'] md:before:content-['桌面'] ...">
  <!-- ... -->
</p>

Learn more about using variants in the variants documentation.