标签：pre Widget ol counter list 背景色 performs 序号 your

<style type="text/css">

.list {list-style-type: none;margin: 0;padding: 0 0 0 30px;}
.list--ordered {counter-reset: list-counter;display: block;}
.list--ordered .list__item::before {
background: #ccc;
color: white;
content: counter(list-counter);
counter-increment: list-counter;
display: block;
height:20px;
left: 0;
line-height:22px;
position: absolute;
text-align: center;
width:20px;
}
</style>

<ol class="list list--ordered">
<li class="list__item">Widget learns and understands your vision.</li>
<li class="list__item">Widget partners with you to move your product from concept to detailed plan and specifications.</li>
<li class="list__item">Widget begins the search for your best sourcing option - auditing and vetting suppliers to meet pre qualification and well-defined standards.</li>
<li class="list__item">Widget shares sourcing options, procurement process, quality concerns and pricing.</li>
<li class="list__item">Widget’s sample/prototyping process begins. The sample lead time is determined your unique product.</li>
<li class="list__item">Widget has a physical presence - serving as your representative - at the chosen manufacturer’s facility.</li>
<li class="list__item">Widget performs pre, mid, and post quality control inspection.</li>
<li class="list__item">Widget performs final pre-shipment inspections on-site.</li>
<li class="list__item">Widget manages the logistics of delivering products from the manufacturer to your door - wherever you may be.</li>
<li class="list__item">Widget follows-up with you to ensure your complete satisfaction!</li>
</ol>

标签：pre,Widget,ol,counter,list,背景色,performs,序号,your
来源： https://www.cnblogs.com/ince/p/10739011.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。