CSS自定义列表项目符号

Published on 2015-02-04


先看一下实际使用效果吧~

You have so many contents, which could be organized to an ordered list...

  1. Your content could even be very very long and long, which is so long that it must be broken to several lines. Does this line long enough? You can even make it longer! Don't you think so?
  2. Your content
  3. Your content
  4. Your content

图中数字前边的图标使用了FontAwesome,数字是由CSS生成的。实现这一点点效果可是费了不少力气,花了大概3个小时左右。其间参考了轻单中的有序列表的组织方法。无序列表的组织可以参考FontAwesome的方案。下面贴代码

这是html的代码结构

<ol>
  <li>
    <span class="bullet fa fa-square"></span>
    <span></span>Your content<!-- could be put here -->
  </li>
</ol>

然后使用下面的CSS调整样式,数字我都是精心调整过的,应该能适用各种场合。

ol {
    list-style-type: none;
    padding-left: 5.2em;
    counter-reset: section; // This is important!!!
}

ol .bullet {
    margin-left: -3.1em;
}

ol .bullet + span:after {
    display: inline-block;
    min-width: 2em;
    padding-right: .4em;
    counter-increment: section;
    content: counter(section) ".";
    text-align: right;
}