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-*** 類來管理文字插入。

Tailwind CSS 內容類示例

以下是 **Tailwind CSS 內容** 類的示例，展示如何使用預定義類有效地設定和管理內容。

使用 Tailwind CSS after 內容屬性

此示例演示瞭如何使用 Tailwind CSS **after 內容** 屬性在連結的錨文字後附加其他內容。這些類能夠將額外的元素或文字插入到特定內容後的偽元素中。

示例

 
<!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.tw" 
        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>

列印頁面