位置：广州松河 > 技术支持 > 列表添加数字序列号前缀，css解决方案！_CSS学习

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

来源：网络整理时间：2023/3/4 1:05:42 共 3625 浏览

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

下面分享出来：

<div class="wrapper">
    <h2>Project Goals</h2>
    <ol>
        <li>Build a website that is easy to use and easy to maintain</li>
        <li>Begin using a constituent database to consolidate all information about members, donors and audiences</li>
        <li>Offer users a way to register and pay for classes online</li>
        <li>Establish a consistent brand for website and print materials</li>
    </ol>
</div>

@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解决数字序列号前缀！

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：ul ol li的数字序号编号样式_CSS学习 | ·下一条：html单行、多行文本溢出隐藏_CSS学习