content

content

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

类名样式

类名	样式
`content-[<value>]`	`content: <value>;`
`content-(<custom-property>)`	`content: var(<custom-property>);`
`content-none`	`content: none;`

content-[<value>]

content: <value>;

content-(<custom-property>)

content: var(<custom-property>);

content-none

content: none;

示例

基本示例

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

更高的分辨率不仅仅意味着更好的图像质量。使用 Retina 6K 显示屏， Pro Display XDR 为您提供比 5K 显示屏多近 40% 的屏幕空间。

<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 函数存储在属性中的值

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

响应式设计

前缀a content 实用工具带有像 md: 这样的断点变体，仅在中等屏幕尺寸及以上应用该实用工具

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

了解更多关于在变体文档中使用变体的信息。

本页内容