本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3美化有序列表的计数器样式

本文介绍如何使用CSS 3美化有序列表的计数器样式。

页面HTML代码

本示例中使用的主要HTML代码如下所示。

<ol class="rounded-list">
    <li><a href="">列表项1</a></li>
    <li><a href="">列表项2</a></li>
    <li><a href="">列表项3</a>
	<ol>
	    <li><a href="">列表项3-1</a></li>
	    <li><a href="">列表项3-2</a></li>
	    <li><a href="">列表项3-3</a></li>
	</ol>
    </li>
    <li><a href="">列表项4</a></li>
    <li><a href="">列表项5</a></li>						
</ol>

CSS样式代码

本文所介绍的美化计数器技巧的关键点在于:在ol有序列表的样式属性中使用counter-reset样式属性(用于初始化计数器)以及为样式列表中的a元素使用:before伪元素选择器,并且为插入的伪元素使用counter-increment样式属性(用于增长计数器值)。

ol{
    counter-reset: li; /* 初始化计数器 */
    list-style: none; /* 移除浏览器默认编号 */
    padding: 0;
    margin-bottom: 4em;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol{
    margin: 0 0 0 2em; /*为内部有序列表设置左外边距值 */
}

制作圆形编号

实际运行结果

  1. 列表项1
  2. 列表项2
  3. 列表项3
    1. 列表项3-1
    2. 列表项3-2
    3. 列表项3-3
  4. 列表项4
  5. 列表项5

CSS 3样式代码

.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: .5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;	
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);	
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -1.3em;
    top: 50%;
    margin-top: -1.3em;
    background: #87ceeb;
    height: 2em;
    width: 2em;
    line-height: 2em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
}

制作方形编号

实际运行结果

  1. 列表项1
  2. 列表项2
  3. 列表项3
    1. 列表项3-1
    2. 列表项3-2
    3. 列表项3-3
  4. 列表项4
  5. 列表项5

CSS 3样式代码

.rectangle-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #ddd;
    color: #444;
    text-decoration: none;
    transition: all .3s ease-out;	
}

.rectangle-list a:hover{
    background: #eee;
}	
.rectangle-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;	
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #fa8072;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}
.rectangle-list a:after{
    position: absolute;	
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    transition: all .3s ease-out;				
}
.rectangle-list a:hover:after{
    left: -.5em;
    border-left-color: #fa8072;				
}