CSS ::marker 偽元素
更多“自己嘗試”的例子見下文。
定義和用法
::marker 偽元素用於樣式化列表項標記。
此偽元素適用於任何設定為 display: list-item 的元素。
注意： ::marker 可以使用的屬性如下：
- 所有字型屬性
- 所有動畫屬性
- 所有過渡屬性
- color
- white-space
- content
- text-combine-upright
- unicode-bidi
- direction
| 版本 | CSS3 |
|---|
瀏覽器支援
表中數字表示首次完全支援此偽元素的瀏覽器版本。
| 偽元素 | |||||
|---|---|---|---|---|---|
| ::marker | 86 | 86 | 68 | 18.1 | 72 |
CSS 語法
::marker {
CSS 宣告;
}
更多示例
示例
使用 content、color 和 font-size 樣式化 <ul> 列表的列表項標記
ul li::marker {
content: "@ ";
color: pink;
font-size: 25px;
}
自己動手試一試 »
示例
將 <h2> 元素設定為 display: list-item，並使用 content 和 color 樣式化列表項標記
h2 {
counter-increment: h2;
display: list-item;
}
h2::marker {
display: list-item;
content: "@" counter(h2) " ";
color: lightgreen;
}
body {
counter-reset: h2;
font-family: verdana;
margin: 50px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 偽元素
