marker

可以使用如下所示的CSS代码让DIV元素有自己的标记：

div.marker {

display: list-item;

margin-left: 1em;

padding-left: 5px;

}

div.marker::marker {

content: '▶';

}

实时渲染效果如下（左侧应该是个三角尖头，如果浏览器不支持会是一个圆点，如果什么都没有，您访问的是盗版）：

summary元素有自己的marker伪元素

其中：

content:'▶'不是必须的，默认就会创建符号‘·’作为项目符号，如下图所示。

默认的标记效果

margin-left:1em也不是必须的，可以设置list-style-position:inside让项目符号字符的位置在标签内。

标记字符可以是任意字符，数量也不限，例如：

div.marker::marker {

content: '→→→→→';

}

二、只支持部分CSS

和::first-letter伪元素、::first-line伪元素类似，::marker伪元素仅支持部分的CSS属性，具体如下：

所有font相关的属性，例如font-size，font-family等，但是不包括line-height属性。

white-space属性；

text-shadow属性（仅Chrome支持），其他text相关属性并不支持；

letter-spacing和word-spacing属性（仅Chrome支持）；

color属性；

text-combine-upright、unicode-bidi和direction属性，这几个属性与文字排版方位相关；

content属性，Safari目前不支持

所有动画和过渡相关的CSS属性，也就是animation和transition属性；

其中，支持animation和transition属性着实让我意外了一番，这在字符性质的伪元素中还是很少见的。

不过，::marker伪元素支持的CSS属性里面支持动画的CSS属性并不多，也就是color属性能用用，因此，潜力一般般，完全没有::before和::after这两个伪元素支持动画和过渡来得给力。

然后Firefox浏览器虽然很早就支持了::marker伪元素，但是::marker支持动画是80这个版本才开始支持的，刚支持没多久，还很热乎。

使用示意：

.marker {

display: list-item;

}

.marker::marker {

transition: color .2s;

content: '▶';

}

.marker:hover::marker {

color: deepskyblue;

}

效果参见下面的GIF录屏：

标记字符颜色过渡动画gif

三、::before/::after中使用::marker

我在CSS Pseudo-Elements Module Level 4规范中找到这么一句话：

The ::before::marker or ::after::marker selectors are valid and can be used to represent the marker boxes of ::before or ::after pseudo-elements that happen to be list items

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。