文字排版
content
用於控制 before 和 after 偽元素內容的實用工具。
| 類別 | 樣式 |
|---|---|
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 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>)] 語法來參考使用 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>在變體文件中了解有關使用變體的更多資訊。
