CSS ::before 偽元素

定義和用法

CSS ::before 偽元素用于在指定元素的內容之前插入一些內容。

使用 content 屬性指定要插入的內容。content 的值可以是：

• 字符串：content: "Hello world!";
• 圖片：content: url(myimage.jpg);
• 無內容：content: none;
• 計數器：content: counter(li);
• 引號：content: open-quote;
• 屬性值：content: " (" attr(href) ")";

提示：請注意，插入的內容仍然位于指定元素內部。插入的內容會添加到元素內部的其他內容之前。

使用 ::after 在特定元素的內容之后插入一些內容。

實例

例子 1

在每個 <p> 元素的內容之前插入一個字符串：

p::before {
  content: "Read this: ";
}

親自試一試

例子 2

在每個 <p> 元素的內容之前插入一個字符串，并設置插入內容的樣式：

p::before {
  content: "Read this -";
  background-color: yellow;
  color: red;
  font-weight: bold;
}

親自試一試

CSS 語法

::before {
  css declarations;
}

技術細節

瀏覽器支持

表格中的數字指定了完全支持該偽元素的首個瀏覽器版本。

相關頁面

教程：CSS 偽元素

參考：CSS ::after 偽元素