龙空技术网

CSS - 定制你的列表前缀 ::marker

Web技术前沿 707

前言:

现在小伙伴们对“css数字位置”可能比较注重,小伙伴们都想要了解一些“css数字位置”的相关内容。那么小编在网络上网罗了一些有关“css数字位置””的相关资讯,希望兄弟们能喜欢,小伙伴们一起来学习一下吧!

现在我们可以使用::marker伪元素来定制列表前缀。像下面这样:

主流浏览器中只有Safari不是完全支持,不过估计也马上会跟上来了。

::marker CSS 伪元素选择列表项的标记框,通常包含项目符号或数字。 它适用于要显示的任何元素或伪元素集:列表项,例如 <li> 和 <summary> 元素。

让我们看个具体的例子:

默认显示效果如下,浏览器会自动画一个小点在每个列表项前:

创建marker

::marker 伪元素标记框在每个列表项元素内自动生成,位于实际内容和 ::before 伪元素之前。

通常,列表项是 <li> HTML 元素,但其他元素也可以成为具有 display:list-item 的列表项。

给marker添加样式

在 ::marker 出现之前,可以使用 list-style-type 和 list-style-image 设置列表样式。这很方便,但我们需要更多。 改变颜色、大小、间距等,这就是 ::marker 出现的原因。 它允许从 CSS 中单独和全局定位这些伪元素:

list-style-type 属性提供了非常有限的样式。 ::marker 伪元素意味着您可以定位标记本身并将样式直接应用于它。

在这个示例中,第一项使用 list-style-type 设置样式,第二项使用 ::marker 设置样式。 第一种情况下的属性适用于整个列表项,而不仅仅是标记,这意味着文本和标记一样具有动画效果。 使用 ::marker 时,我们可以只定位标记(::marker)而不是文本。

改变Marker的方法,两种方式,效果一样:

使用SVG:

使用数字列表:

默认情况下,有序列表项OL上的标记是数字而不是项目符号。 在 CSS 中,这些被称为计数器,它们非常强大。 它们甚至具有设置和重置数字开始和结束位置的属性,或者将它们切换为罗马数字。 我们可以直接使用::marker来做,

更多使用方法,大家可以查看MDN,感谢阅读!

标签: #css数字位置 #css选择符号有哪些 #css序列号 #css项目符号