Typography
content
用于控制伪元素 before 和 after 的内容的工具类。
| Class | Styles |
|---|---|
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.
<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>)] 语法通过 CSS 的 attr() 函数引用存储在属性中的值：
<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.
