CSS content 屬性
更多“自己嘗試”的例子見下文。
定義和用法
content 屬性與 ::before 和 ::after 偽元素結合使用，用於插入生成的內容。
| 預設值 | normal |
|---|---|
| 繼承 | no |
| 可動畫 | 否。 閱讀關於可動畫屬性 |
| 版本 | CSS2 |
| JavaScript 語法 | 您無法使用 JavaScript 為元素賦予偽類， 但是有其他方法可以達到相同的結果： 嘗試一下 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
CSS 語法
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
屬性值
| 值 | 描述 | 示例 |
|---|---|---|
| normal | 預設值。如果指定了 content，則設定為 normal，預設為 "none"（即什麼都沒有） | 試一試 » |
| none | 將 content 設定為空 | 試一試 » |
| counter | 將 content 設定為計數器 | 試一試 » |
| attr(attribute) | 將 content 設定為選擇器的某個屬性 | 試一試 » |
| string | 將 content 設定為您指定的文字 | 試一試 » |
| open-quote | 將 content 設定為開引號 | 試一試 » |
| close-quote | 將 content 設定為閉引號 | 試一試 » |
| no-open-quote | 如果指定了，則從 content 中刪除開引號 | 試一試 » |
| no-close-quote | 如果指定了，則從 content 中刪除閉引號 | 試一試 » |
| url(url) | 將 content 設定為某種媒體（影像、聲音、影片等） | 試一試 » |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit | 試一試 » |
更多示例
示例
如何透過刪除 <ul> 或 <ol> 的預設專案符號並插入看起來像專案符號的 HTML 實體（•）來為其新增專案符號顏色
ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
自己動手試一試 »
相關頁面
CSS 參考：::before 偽元素
CSS 參考：::after 偽元素
