Tailwind CSS - 内容

Tailwind CSS **内容** 包含预定义的类，使样式化和组织网页内容更容易。这些类专门管理 CSS 中伪元素（:before 和 :after）内的内容。

Tailwind CSS 内容类

下面是 Tailwind CSS 内容类的列表，包含用于高效样式化和组织网页内容的属性。

类	CSS 属性
content-none	content: none;

Tailwind CSS 内容类的功能

**content-none:** Tailwind CSS 没有 content-none 类。它使用带有 'after' 和 'before' 的 **content-*** 类来管理文本插入。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 内容类示例

以下是 **Tailwind CSS 内容** 类的示例，展示如何使用预定义类有效地设置和管理内容。

使用 Tailwind CSS after 内容属性

此示例演示了如何使用 Tailwind CSS **after 内容** 属性在链接的锚文本后附加其他内容。这些类能够将额外的元素或文本插入到特定内容后的伪元素中。

示例

Open Compiler

 
<!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://tutorialspoint.com" 
        class="after:content-['Click me'] bg-blue-200">
        link to visit a website</a>.
    </p>
</body>

</html>

控制主要内容之前的插入内容

此示例展示了 Tailwind CSS 内容类，用于使用 'before' 属性动态设置伪元素的内容，将其显示在内容开始之前。

示例

Open Compiler

<!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>

打印页面