列表添加数字序列号前缀，css解决方案！

《列表添加数字序列号前缀，css解决方案！》正文开始，本次阅读大概9分钟。

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

下面分享出来：

divclass=wrapper
h2ProjectGoals/h2
ol
liBuildawebsitethatiseasytouseandeasytomaintain/li
liBeginusingaconstituentdatabasetoconsolidateallinformationaboutmembers,donorsandaudiences/li
liOfferusersawaytoregisterandpayforclassesonline/li
liEstablishaconsistentbrandforwebsiteandprintmaterials/li
/ol
/div

@importurl(http://fonts.googleapis.com/css?family=Lato|Bree+Serif);
body{
background:white;
}
*,
*:before,
*:after{
box-sizing:border-box;
}
.wrapper{
margin:2emauto;
width:90%;
max-width:1000px;
}
h2{
font-family:BreeSerif,serif;
}
ol{
counter-reset:li;
margin:0;
padding:0;
}
olli{
font-family:Lato,sans;
font-size:1.3em;
list-style:none;
margin:000.5em1.95em;
padding:0.5em1em;
position:relative;
}
olli:before{
background:#8da97d;
color:white;
content:counter(li);
counter-increment:li;
font-family:BreeSerif,serif;
font-size:1.2em;
line-height:1em;
padding:0.5em0;
position:absolute;
top:0.4em;
left:-1.6em;
text-align:center;
width:2em;
}

效果：

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