详解CSS伪元素::marker

::marker介绍

::marker CSS pseudo-element（CSS伪元素） 选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上，例如<li>和<summary>。

例如：

<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

ul li::marker {            
  color: red;            
  content: '★';        
}

普通元素中使用::marker

如果普通元素要想使用marker，例如<div>元素想要使用::marker伪元素，必须将元素定义成display: list-item，list-items在创建的时候会自动生成marker和counter。

代码示意：

<h3>没有设置list-item：</h3>      
<div>                 
   <p>Peaches</p>        
   <p>Apples</p>        
   <p>Plums</p>      
</div>      
<h3>设置list-item：</h3>        
<div>                       
   <p class="marker">Peaches</p>            
   <p class="marker">Apples</p>            
   <p class="marker">Plums</p>        
</div>

p.marker {            
   display: list-item;        
}        
p::marker {            
   color: red;            
   content: '★';          
}

允许改变 ::marker样式的的CSS属性

• animation-*
• transition-* 
• color 
• direction 
• font-* 
• content 
• unicode-bidi 
• white-space

利用::marker特有的属性设置样式，这意味着文本和标记都在动画化。当使用::marker时，我们可以只针对标记框而不是文本。

li {      
   list-style-type: '?';      
   font-size: 1rem;    
}    
/*::marker可覆盖list-style-type设置的图标，并且改变大小跟颜色*/    
li:nth-child(2)::marker {      
   content: '!';      
   font-size: 2rem;    
}    
/*实现指上列变更列表项颜色*/    
li:nth-child(3):hover::marker {      
   color: red;    
}

<ul>    
   <li>Peaches</li>    
   <li>Apples</li>    
   <li>Plums</li>  
</ul>

兼容性

现在，现代浏览器均已经支持了::marker伪元素（兼容性实时查看）

文章来源：详解CSS伪元素::marker | 猿小莫的博客