CSS 计数器使用字母可以使用 counter(chapter, lower-alpha); 来实现.
1, 首先重置 ul 的计数器为 listStyle;
2, 然后指定 li 标签的样式为 counter-increment:listStyle;
3, 最后用伪类元素::before 添加 counter, 指定计数类型为 lower-alpha 即可.
第二个参数用于 counter() 定义所用计数器的类型, 例如:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- ul { counter-reset:listStyle; list-style:none; } ul li { margin-left:1em;
- counter-increment:listStyle; } ul li::before { margin-right:1em; content:counter(listStyle,lower-alpha);
- }
- </style>
- </head>
- <body>
- <ul>
- <li>
- one
- </li>
- <li>
- two
- </li>
- <li>
- three
- </li>
- </ul>
- </body>
- </HTML>
效果:
计数器类型其他的取值: decimal,decimal-leading-zero,lower-roman,upper-roman,lower-greek,lower-latin,upper-latin,armenian,georgian,lower-alpha,upper-alpha.
本文来自 css3 答疑 https://www.html.cn/qa/css3/ 栏目, 欢迎学习!
来源: http://www.css88.com/qa/css3/14927.html