CSS3 自定义序号样式的列表

此代码仅供参考

---

代码说明

CSS3 自定义序号样式的列表(ol/li)

---

html代码

<style type="text/css"> *, *:before, *:after { box-sizing: border-box; } body { background: #ecf0f1; color: #4d4d4d; font-family: 'Montserrat', sans-serif; } ol { counter-reset: list; list-style-type: none; -webkit-columns: 3 300px; -moz-columns: 3 300px; columns: 3 300px; margin: 1em; } li a { background: white; color: inherit; text-decoration: none; display: block; position: relative; margin-bottom: 0.5em; padding-left: 0.75em; padding-right: 1em; height: 2.5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } li a:before, li a:after { display: inline-block; width: 2.5em; height: 2.5em; padding: 0.2em; line-height: 2.25; color: white; text-align: center; -webkit-transition: text-indent 0.2s; transition: text-indent 0.2s; top: 0; } li a:before { counter-increment: list; content: counter(list); position: relative; left: -0.75em; background: #e67e22; } li a:after { content: "\f075"; position: absolute; left: 0; text-indent: 2.5em; overflow: hidden; font-family: FontAwesome; } li a:hover:before { text-indent: -4em; } li a:hover:after { text-indent: 0; } </style> <ol> <li> <a href='#'> Nam accumsan sagittis augue, quis commodo ligula feugiat </a> </li> <li> <a href='#'> Nunc vel venenatis tortor id dignissim arcu </a> </li> <li> <a href='#'> Etiam rutrum lacus sit amet gravida feugiat </a> </li> <li> <a href='#'> Erat quam porta lorem </a> </li> <li> <a href='#'> Id aliquet arcu orci a tortor </a> </li> <li> <a href='#'> Vivamus lobortis elit non lectus rhoncus elementum </a> </li> <li> <a href='#'> Nulla turpis augue luctus eu interdum ut </a> </li> <li> <a href='#'> Mattis a sapien </a> </li> <li> <a href='#'> In faucibus </a> </li> <li> <a href='#'> Massa non feugiat faucibus </a> </li> </ol>

---

代码演示

1. Nam accumsan sagittis augue, quis commodo ligula feugiat
2. Nunc vel venenatis tortor id dignissim arcu
3. Etiam rutrum lacus sit amet gravida feugiat
4. Erat quam porta lorem
5. Id aliquet arcu orci a tortor
6. Vivamus lobortis elit non lectus rhoncus elementum
7. Nulla turpis augue luctus eu interdum ut
8. Mattis a sapien
9. In faucibus
10. Massa non feugiat faucibus

---

---