首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >css 自定义 ol/li 序号样式

css 自定义 ol/li 序号样式

原创
作者头像
小唐同学.
发布2022-02-18 10:22:53
发布2022-02-18 10:22:53
2.3K0
举报
文章被收录于专栏:CMS建站教程CMS建站教程

默认样式:

image.png
image.png

自定义样式:

image.png
image.png
代码语言:javascript
复制
ol {
  counter-reset: li;  // 创建计数器
}
ol li {
  position: relative;
  padding-left: 30px;
}
ol li::before {
  content: counter(li) ".";
  counter-increment: li;  // 递增计数器
  position: absolute;
  left: 0;
  font-size: 28px;
  color: rgba(0, 0, 0, .8);
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 默认样式:
  • 自定义样式:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档