1. 排版
  2. content

排版

content

用于控制前后伪元素内容的工具。

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

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use the content-[<value>] syntax, along with the before and after variants, to set the contents of the ::before and ::after pseudo-elements:

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

引用属性值(Referencing an attribute value)

¥Referencing an attribute value

使用 content-[attr(<name>)] 语法引用使用 attr() CSS 存储在属性中的值功能:

¥Use the content-[attr(<name>)] syntax to reference a value stored in an attribute using the attr() CSS function:

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

使用空格和下划线(Using spaces and underscores)

¥Using spaces and underscores

由于空格表示 HTML 中类的结尾,因此用下划线替换任意值中的任何空格:

¥Since whitespace denotes the end of a class in HTML, replace any spaces in an arbitrary value with an underscore:

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

如果你需要包含一个实际的下划线,你可以通过用反斜杠转义它来做到这一点:

¥If you need to include an actual underscore, you can do this by escaping it with a backslash:

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

使用 CSS 变量(Using a CSS variable)

¥Using a CSS variable

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

¥Use the content-(<custom-property>) syntax to control the contents of the ::before and ::after pseudo-elements using a CSS variable:

<p class="content-(--my-content)">
<!-- ... -->
</p>

这只是 content-[var(<custom-property>)] 的简写,可自动为你添加 var() 功能。

¥This is just a shorthand for content-[var(<custom-property>)] that adds the var() function for you automatically.

响应式设计(Responsive design)

¥Responsive design

content 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号