content

content

用於控制 before 和 after 偽元素內容的通用類別。

Class Styles

Class	Styles
`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;

範例（Examples）

基本範例（Basic example）

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

參照屬性值（Referencing an attribute value）

使用 content-[attr(<name>)] 語法透過 attr() CSS 函式參照儲存在屬性中的值：

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

使用空格和底線（Using spaces and underscores）

由於空白字元在 HTML 中表示類別的結尾，請將任意值中的空格替換為底線：

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

如果你需要包含實際的底線，可以使用反斜線來跳脫：

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

使用 CSS 變數（Using a CSS variable）

使用 content-(<custom-property>) 語法透過 CSS 變數控制 ::before 和 ::after 偽元素的內容：

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

這只是 content-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。

響應式設計（Responsive design）

在 content 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。

On this page