CSS ::marker 让文字序号更有意思
2024-02-22 02:40:48
使用 CSS3 ::marker 伪元素自定义列表序号
列表序号美化
在当今注重视觉体验的网络世界中，网站列表早已跳脱了传统的枯燥单调。为了增强视觉吸引力，网站设计师们绞尽脑汁，在列表序号上大做文章。一些网站巧妙地添加了小图标，而另一些则采用了带有渐变色调的彩色序号，让列表瞬间脱颖而出。然而，CSS 本身并未提供专门设置序号样式的属性。
::marker 的诞生
随着 CSS3 的出现，一切迎刃而解。CSS3 引入了 ::marker 伪元素，专门用于美化列表序号。有了 ::marker，设计师们可以挥洒创意，打造个性化的列表序号样式，让列表不再局限于简单的数字或字母。
使用方法
::marker 的使用非常简单。下面通过几个具体的例子来演示：
数字序号后面加点
ol {
list-style-type: decimal;
counter-reset: ol-counter;
}
ol li {
counter-increment: ol-counter;
display: flex;
align-items: center;
gap: 1rem;
}
ol li::marker {
content: counter(ol-counter) ".";
font-weight: bold;
color: #f00;
}
在这个例子中，我们设置了带有点的数字序号。counter-reset 用于重置计数器，而 counter-increment 则递增计数器。content 属性指定了序号内容，即序号后面跟着一个点。
小写字母序号后面加圆点
ul {
list-style-type: lower-roman;
counter-reset: ul-counter;
}
ul li {
counter-increment: ul-counter;
display: flex;
align-items: center;
gap: 1rem;
}
ul li::marker {
content: counter(ul-counter, lower-roman) ".";
font-weight: bold;
color: #00f;
}
类似地，我们还可以设置小写字母序号。lower-roman 指定了小写罗马数字作为序号类型。
带有阴影的圆圈序号
ul {
list-style-type: none;
counter-reset: ul-counter;
}
ul li {
counter-increment: ul-counter;
display: flex;
align-items: center;
gap: 1rem;
}
ul li::marker {
content: counter(ul-counter) ") ";
font-size: 2rem;
font-weight: bold;
color: #fff;
background: #000;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 0 3px #fff, 0 0 0 6px #000;
}
这个例子演示了如何创建带有阴影的圆圈序号。通过设置 content 属性和样式，我们可以自定义序号的外观，包括字体大小、颜色、背景和阴影效果。
其他用法
::marker 的用法还有很多。以下是一些其他的可能性：
- 使用 SVG 图标作为序号
- 添加动画效果
- 创建渐变色的序号
注意： ::marker 伪元素不适用于 IE 浏览器。
结论
CSS3 ::marker 伪元素为我们提供了强大的工具，可以轻松地自定义列表序号的样式，从而提升列表的视觉效果。通过释放我们的想象力，我们可以创造出独特而富有创意的序号，让列表不再单调乏味。
常见问题解答
-
::marker 能在 IE 浏览器中使用吗？
不，::marker 不适用于 IE 浏览器。 -
::marker 可以用来设置所有类型的列表吗？
是的，::marker 可以用于有序列表 (ol) 和无序列表 (ul)。 -
::marker 可以添加动画效果吗？
是的，可以通过 CSS 动画来给 ::marker 添加动画效果。 -
::marker 能用来显示自定义图片吗？
是的，可以使用 SVG 图标作为序号，从而显示自定义图片。 -
::marker 有哪些实际应用场景？
::marker 可以用于创建引人注目的列表，例如博客文章中的步骤列表、产品说明中的功能列表或网站导航菜单中的项目列表。
