CSS ::before 偽元素
更多“自己嘗試”的例子見下文。
定義和用法
`::before` 偽元素會在指定元素的*內容*前面插入一些內容。
使用 content 屬性來指定要插入的內容。 `content` 的值可以是：
- 一個字串： content: "Hello world!";
- 一張圖片： content: url(myimage.jpg);
- 什麼都沒有： content: none;
- 一個計數器： content: counter(li);
- 一個引號： content: open-quote;
- 一個屬性值： content: " (" attr(href) ")";
提示： 請注意，插入的內容仍然在指定元素內部。插入的內容會新增到元素內部的其他內容之前。
使用 ::after 在指定元素的*內容*後面插入一些內容。
| 版本 | CSS2 |
|---|
瀏覽器支援
表中數字表示首次完全支援此偽元素的瀏覽器版本。
| 偽元素 | |||||
|---|---|---|---|---|---|
| ::before | 4.0 | 9.0 | 3.5 | 3.1 | 7.0 |
CSS 語法
::before {
CSS 宣告;
}
更多示例
示例
在每個 <p> 元素的內容前面插入一個字串，併為插入的內容設定樣式
p::before {
content: "Read this -";
background-color: yellow;
color: red;
font-weight: bold;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 偽元素
CSS 偽元素參考： ::after
