你不知道的CSS—-伪元素::marker-一一网

::marker是什么

::marker是css伪元素，可以用在li元素或设置了display:list-item的元素上，自定义项目符或者数字的样式。

::marker允许的属性值

::marker只能使用以下css属性：

font属性
color属性
content属性
text-combine-upright，unicode-bidi和direction属性

::marker使用示例

改变项目符/数字颜色

    #ul1 li::marker{
      color: red;
      font-size: 1.5em;
    }
    #ul2 li::marker{
      color: blue;
      font-size: 1em;
    }
  <ul id="ul1">
     <li>现场:解放军霸气喊话驱离美军机</li>
    <li>高考移民考入复旦被开除后起诉学校</li>
    <li>拜登:将国家紧急状态延长一年</li>
    <li>货拉拉乘客坠亡案被告人已签认罪书</li>
  </ul>
  <ol id="ul2">
    <li>现场:解放军霸气喊话驱离美军机</li>
    <li>高考移民考入复旦被开除后起诉学校</li>
    <li>拜登:将国家紧急状态延长一年</li>
    <li>货拉拉乘客坠亡案被告人已签认罪书</li>
  </ol>
复制代码

改变项目符的图标

li::marker{
  content: '? '
}
复制代码

自定义display:list-item的元素的项目符

#ul4{
  margin-left: 40px;
  font-size: 14px;
}
h3 {
  counter-increment: h3;
  display: list-item;
}
h3::marker {
  display: list-item;
  content: "#"counter(h3) " ";
  color: lightsalmon;
  font-weight: bold;
}
<div id="ul4">
    <h3>现场:解放军霸气喊话驱离美军机</h3>
    <h3>高考移民考入复旦被开除后起诉学校</h3>
    <h3>拜登:将国家紧急状态延长一年</h3>
    <h3>货拉拉乘客坠亡案被告人已签认罪书</h3>
</div>
复制代码