Các tiện ích để kiểm soát nội dung của các pseudo-element before và after.
| Class | Styles |
|---|---|
content-[<value>] | content: <value>; |
content-(<custom-property>) | content: var(<custom-property>); |
content-none | content: none; |
Sử dụng cú pháp content-[<value>], cùng với các biến thể before và after, để đặt nội dung của các pseudo-element ::before và ::after:
<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>Sử dụng cú pháp content-[attr(<name>)] để tham chiếu giá trị được lưu trữ trong một thuộc tính bằng cách sử dụng hàm CSS attr():
<p before="Hello World" class="before:content-[attr(before)] ..."> <!-- ... --></p>Vì khoảng trắng biểu thị sự kết thúc của một class trong HTML, hãy thay thế bất kỳ khoảng trắng nào trong giá trị tùy ý bằng dấu gạch dưới:
<p class="before:content-['Hello_World'] ..."></p>Nếu bạn cần bao gồm một dấu gạch dưới thực sự, bạn có thể làm điều này bằng cách escape nó bằng dấu gạch chéo ngược:
<p class="before:content-['Hello\_World']"></p>Sử dụng cú pháp content-(<custom-property>) để kiểm soát nội dung của các pseudo-element ::before và ::after bằng cách sử dụng biến CSS:
<p class="content-(--my-content)"></p>Đây chỉ là cách viết tắt cho content-[var(<custom-property>)] giúp thêm hàm var() cho bạn một cách tự động.
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.