列表添加数字序列号前缀，css解决方案！ – CSS – 前端，iecss3.htc怎么用

下面分享出来：

<divclass="wrapper">
<h2>ProjectGoals</h2>
<ol>
<li>Buildawebsitethatiseasytouseandeasytomaintain</li>
<li>Beginusingaconstituentdatabasetoconsolidateallinformationaboutmembers,donorsandaudiences</li>
<li>Offerusersawaytoregisterandpayforclassesonline</li>
<li>Establishaconsistentbrandforwebsiteandprintmaterials</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;
}
ol>li{
font-family:"Lato",sans;
font-size:1.3em;
list-style:none;
margin:000.5em1.95em;
padding:0.5em1em;
position:relative;
}
ol>li: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;
}

效果：

html的css，css实验教程，css 优化 优点缺点，css样式背景变成白色，animate.css常用动画，揭开css3的面纱，iecss3.htc怎么用

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