新！我的 44 頁電子書「44 分鐘搞懂 CSS」出爐囉！😃

立即取得 →

#content

定義 :before 和 :after 偽元素的文字內容。

預設值 content: normal;

不會新增任何內容至元素。

content: "Foo bar";

考慮這個 HTML 元素

<p class="element">
  Hello world
</p>

以及這個 CSS

.element:before {
  content: "Foo bar";
}

文字內容會前置於元素的內容之前。

請注意最終結果會結合 HTML 的文字和 CSS 的文字。

content: url(/images/jt.png);

你可以使用 url() 函數插入圖片。

content: attr(data-something);

考慮這個 HTML 元素

<p class="element" data-something="cssreference">
  Hello world
</p>

以及這個 CSS

.element:before {
  content: attr(data-something);
}

該元素將從 HTML 屬性擷取文字內容。