::marker
伪元素 ::marker，可作用在任何设置了 display: list-item 的元素或伪元素上，例如<li>和<summary>。
/**
<ul><li>Peaches</li><li>Apples</li><li>Plums</li>
</ul>
*/
ul li::marker {color: red;font-size: 1.5em;
}
但是，对于::marker伪元素内的样式，目前只允许使用：
- all font properties -- 所以字体属性相关
- color -- 颜色值
- the content property -- content 内容，类似于
::before伪元素 的 content，用于填充序号内容 - text-combine-upright (en-US), unicode-bidi and direction properties -- 文档书写方向相关
浏览器兼容性：
其他探索
1. 动态变化
::marker 动态的改变，可以搭配 :hover 实现鼠标悬停变换。
li {color: #000;transition: .2s all;
}
li:hover {color: #ff6000;
}
li::marker {content: '😩';
}
li:hover::marker {content: '😁';
}
2. 搭配 CSS 计数器 counter
::marker 也有 content 样式属性，由于 content 的 value 是可以做简单的字符串加法操作的。
因此，利用 ::marker 和 CSS 计数器 counter-increment 实现一个自动计数且 h3 前面带一个特定符号的有序列表：
h3 {counter-increment: h3;display: list-item;
}h3::marker {display: list-item;content: "#" counter(h3) " ";color: lightsalmon;font-weight: bold;
}body {counter-reset: h3;line-height: 1.4;font-family: system-ui;margin: 3rem;
}
