Tailwind CSS - 内容
Tailwind CSS content 包含预定义类，可让您更轻松地设置网页内容的样式并进行组织。这些类专门管理 CSS 中伪元素(:before 和 :after)中的内容。
Tailwind CSS content 内容类
以下是 Tailwind CSS content 内容类列表，其中包含用于高效设置网页内容样式和组织的属性。
| 类 | CSS 属性 |
|---|---|
| content-none | content: none; |
Tailwind CSS 内容类的功能
- content-none:Tailwind CSS 没有 content-none 类。它使用 content-* 类以及"after"和"before"来管理文本插入。
Tailwind CSS 内容类示例
以下是 Tailwind CSS 内容 类的示例，展示了如何使用预定义类有效地设置样式和管理内容。
使用 Tailwind CSS After 内容属性
此示例展示了 Tailwind CSS after content 属性如何在链接的锚文本后附加额外内容。这些类允许在特定内容之后将额外的元素或文本插入到伪元素中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Content
</h2>
<h3 class="underline font-bold mb-6">
Controlling Content with After Attributes
</h3>
<p>
This paragraph is followed by a
<a href="https://www.tutorialspoint.com"
class="after:content-['Click me'] bg-blue-200">
link to visit a website</a>.
</p>
</body>
</html>
控制在主内容之前插入内容
此示例展示了 Tailwind CSS 内容类，它们用于使用"before"属性动态设置伪元素的内容，并在内容开始之前显示它。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-2xl font-bold mb-6">
Tailwind CSS Content
</h2>
<h3 class="underline font-bold mb-6">
Controlling Content Insertion Before Main Content
</h3>
<div before="Inserting Hello before content begins!"
class="before:content-[attr(before)] border p-4">
Here the main content starts...
</div>
</body>
</html>
