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 伪元素