排版
content
用于控制前后伪元素内容的工具。
类 | 样式 |
---|---|
content-[<value>] | content: <value>; |
content-(<custom-property>) | content: var(<custom-property>); |
content-none | content: none; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 content-[<value>]
语法以及 before
和 after
变体来设置 ::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:
<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>
引用属性值(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>
请参阅 变体文档 详细了解如何使用变体。