content

用于控制 before 和 after 伪元素内容的工具类。

快速参考

类	属性
content-[<value>]	content: <value>;
content-(<custom-property>)	content: var(<custom-property>);
content-none	content: none;

示例

基础示例

使用 content-[<value>] 语法，配合 before 和 after 变体，设置 ::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.

<!-- [!code classes:after:content-['_↗']] -->
<!-- prettier-ignore -->
<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 函数引用存储在属性中的值：

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

使用空格和下划线

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

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

如果需要包含真正的下划线，可以用反斜杠转义：

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

使用 CSS 变量

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

<!-- [!code classes:content-(--my-content)] -->
<p class="content-(--my-content)"></p>

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

响应式设计

使用 md: 等断点变体作为 content 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。