html中正方形前缀样式列表,列表添加数字序列号前缀，css解决方案！

昨天一个模板用户咨询我关于列表增加数字序列号，比如 1 2 3 ...这样的前缀，但代码中并不能生成前缀数字，或者懒的去弄，想直接用css解决，其实方案还是有的，并且现在还算比较方便！

下面分享出来：

Project Goals

1. Build a website that is easy to use and easy to maintain
2. Begin using a constituent database to consolidate all information about members, donors and audiences
3. Offer users a way to register and pay for classes online
4. Establish a consistent brand for website and print materials

@import url(http://fonts.googleapis.com/css?family=Lato|Bree+Serif);

body {

background: white;

}

*,

*:before,

*:after {

box-sizing: border-box;

}

.wrapper {

margin: 2em auto;

width: 90%;

max-width: 1000px;

}

h2 {

font-family: "Bree Serif", serif;

}

ol {

counter-reset: li;

margin: 0;

padding: 0;

}

ol > li {

font-family: "Lato", sans;

font-size: 1.3em;

list-style: none;

margin: 0 0 0.5em 1.95em;

padding: 0.5em 1em;

position: relative;

}

ol > li:before {

background: #8da97d;

color: white;

content: counter(li);

counter-increment: li;

font-family: "Bree Serif", serif;

font-size: 1.2em;

line-height: 1em;

padding: 0.5em 0;

position: absolute;

top: 0.4em;

left: -1.6em;

text-align: center;

width: 2em;

}

效果：

这个方式最简单，直接用css解决数字序列号前缀！