详解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 | 猿小莫的博客

详解CSS伪元素::marker相关推荐

详解CSS伪类与伪元素
伪类/伪元素定义做前端那必须的要接触到 CSS 的伪类和伪元素.常见的又:focus,:hover,:link,:visited 等等.在 CSS1 和 CSS2 中对伪类和伪选择器没有做出很明显的 ...
css伪元素选择器，first-letter、first-line
全栈工程师开发手册 (作者:栾鹏) css系列教程1-选择器全解 css伪元素选择器伪元素选择器,用于选择元素内的局部,包括first-letter.first-line等代码如下: p:firs ...
css伪元素before和after用法详解
css伪元素before和after用法详解要想了解伪元素before和after到底是什么,首先就应该打开编译器敲入代码并在浏览器运行检查 <!DOCTYPE html> <ht ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
inline-block是html5,详解CSS display:inline-block的应用
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...
详解CSS float属性
转自:http://luopq.com/2015/11/08/CSS-float/ \详解CSS float属性 Posted on 2015-11-08 | In CSS | 5条评 ...
[JS 分析] 汽_车_之_家 JS 生成 CSS 伪元素 hs_kw44_configUS::before
0.参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements https://developer.mozilla.org/ ...

详解CSS伪元素::marker

::marker介绍

普通元素中使用::marker

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

兼容性

详解CSS伪元素::marker相关推荐

最新文章

热门文章