程序员经验分享-hwhale

带有数字填充的 CSS 计数器 [重复]

2023-11-24

可以垫吗counter数字取决于其价值？

div {
  counter-reset: ruler;
}

div > span {
  display: block;
  line-height: 1rem;
}

div > span::before {
  counter-increment: ruler;
  content: counter( ruler ) ' ';
}
<div>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
</div>

就像如果有 42 行，数字就会像09 or  9, 420 — 009 or   9.


Use 小数点前导零柜台内。

div {
  counter-reset: ruler;
}

div > span {
  display: block;
  line-height: 1rem;
}

div > span::before {
  counter-increment: ruler;
  content: counter( ruler , decimal-leading-zero) ' ';
}
<div>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
  <span>Hello, World!</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

css

csscounter

zeropadding

带有数字填充的 CSS 计数器 [重复] 的相关文章

随机推荐

  • 作为启动上下文提供时 CoroutineExceptionHandler 不执行

    当我运行这个时 fun f runBlocking val eh CoroutineExceptionHandler e gt trace exception handler e val j1 launch eh trace launche

  • 如何使用 StylePlaceHolder 和 Style 控件控制 ASP.NET 主题中的样式表

    Update 这变成了一篇博客文章 包含更新的链接和代码 位于我的博客上 https egilhansen com 2008 12 01 how to take control of style sheets in asp net them

  • 为什么 cfcookie 不允许将 domain= 设置为 CFID/CFTOKEN 的子域？

  • phpMyAdmin 报告“无权限”

    长话短说 我最终从 EasyPHP 中的 PHPMyAdmin 中删除了 root 用户 经过一番研究 我使用了skip grant tables来重新获得数据库访问权限 然而 现在我不能做任何事情 因为 root 用户有 无特权 也就是说

  • Pyppeteer：浏览器在 AWS Lambda 中意外关闭

    我在 AWS Lambda 中遇到此错误 看来 devtools websocket 没有启动 不知道如何修复它 有任何想法吗 谢谢你的时间 异常源自get ws endpoint 由于websocket响应超时https github c

  • 在 Swift 中迭代字典

    我对 Xcode 在 Swift 编程语言指南 中给我的这个实验的答案有点困惑 Use a for in to iterate through a dictionary experiment let interestingNumbers P

  • 如何使 JXTreeTable 对其顶部元素进行排序

    我知道 我已经查看了来源 JXTreeTable 上的排序已被禁用 但是 我希望允许仅根据根节点的直接子节点的值对所有列进行排序 假设我有这样的结构 Name Date File UID Root Mr X 1996 10 22 AE123

  • rspec 和 Shoulda - 互补还是替代？

    我已经使用shoulda有一段时间了 并且我已经阅读并使用了rspec 我没有做过深入的比较和对比 但在我看来 两者之间有一些重叠 但它们并不是一对一的替代 我正在考虑使用 rspec 在我的 Rails 系统中编写一些单元测试 而不替换用

  • Django ORM：覆盖子类中字段的 related_name

    我得到这个异常 django core exceptions FieldError 类 SpecialPlugin 中的本地字段 ticket 与基类 BasePlugin 中名称相似的字段发生冲突 这是我的模型 class BasePlu

  • 点击屏幕顶部状态栏时 UITableView 滚动到顶部

    我插入了一个UITableView在另一个里面UIViewController的观点 但是当我点击屏幕顶部的状态栏时 表视图不会滚动到顶部 这是 iOS 应用程序中的预期行为 我试过 self tableView setScrollsToT

  • 更改实例变量

    我有这个代码 class Yes def init self self a 1 def yes self if self a 1 print Yes else print No but yes class No Yes def no sel

  • 控制android状态栏图标

    我正在尝试对状态栏中图标的状态进行一些控制 我希望能够执行以下操作 保留图标 在状态栏中可见 只要 当应用程序运行时 即使用户选择清除状态栏 清除状态栏中的图标 如果应用程序退出 即使 特别是 它被杀死 我意识到当应用程序显式退出时我可以将

  • 将 Relay 与 React-Native 结合使用时的条件片段或嵌入式根容器

    我有relay与 一起工作react native 但我对如何最好地利用中继路由和根容器感到困惑 特别是在使用Navigator呈现多条路线 参加以下课程 var Nav React createClass renderScene rout

  • 测试用例和断言语句

    代码在这个问题让我思考 assert value gt 0 Precondition if value gt 0 Doit 我从不写 if 语句 断言就足够了 你全部can做 早早崩溃 经常崩溃 代码完成 states 断言语句使应用程序正

  • 以下位操作的优化机会？

    您认为 haswon 函数还有优化的空间吗 见下文 我认识到将参数类型从 int64 to unsigned int64使该功能比我想象的更快 也许还有优化的机会 更详细地说 我正在写一个连接四个游戏 最近我使用了Profiler很困并认识

  • 如何在 Visual Studio 2008 中自定义复制/粘贴行为？

    如何在 Visual Studio 2008 中自定义复制 粘贴行为 例如我创建一个新的 div div 然后将其复制并粘贴到同一个文件中 VisualStudio 粘贴 div div 而不是我复制的原文 更令人沮丧的是 当我尝试复制一组

  • 通过 Javascript 访问 Google Apps 公共电子表格

    花了很多时间看这个 似乎有关访问 Google apps 电子表格的少量信息维护得不是很好 今年的 Google IO 上宣布了增强的 Google apps 脚本 包括 UI 元素 这让我想到创建一个基于 Google 电子表格中的数据的

  • 在 MVC 操作中将 SSRS 报告导出为 PDF

    是的 我想将 SSRS 报告导出为 PDF 并从我的操作中返回它 我没有任何报告查看器 请建议我如何实现这一目标 到目前为止我已经做到了 public void SqlServerReport NetworkCredential nwc n

  • 指针和数组混淆的 K&R Qsort 示例

    我发现很难理解下面的代码片段 我理解所显示的指向函数风格的指针 但我发现混乱之处在于指示的行中 void qsort void v int left int right int comp void void int i last void

  • 带有数字填充的 CSS 计数器 [重复]

    这个问题在这里已经有答案了 可以垫吗counter数字取决于其价值 div counter reset ruler div gt span display block line height 1rem div gt span before

热门标签