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

不使用图像,只使用CSS制作列表项图标的9个设计示例

本文展示如何不使用图像,而只使用CSS样式代码制作列表项图标。这样制作的好处是仅需修改CSS样式代码即可修改列表图标的尺寸及背景色等等。

共同HTML代码

本文中最后一个示例使用的是ol元素,其他示例均使用ul及li元素。首先介绍本文示例中使用的共同HTML代码,如下所示:

<ul>
	<li>示例文字</li>
	<li>示例文字</li>
	<li>第一行示例文字<br />第二行示例文字</li>
</ul>

上述代码中的li元素的list-style样式属性值均需设置为none。

1 直线

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .65em;
    left: -1em;
    width: 8px;
    height: 1px;
    background-color: #666;
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

2 箭头#1

<style>
ul li {
    position: relative;
    list-style:none;
}        
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .5em;
    left: -1em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

3 箭头#2

使用:before在前方箭头中添加短线。

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after,
ul li::before {
    display: block;
    content: '';
    position: absolute;
}
ul li::after {
    top: 9px;
    left: -1em;
    width: 6px;
    height: 6px;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
ul li::before {
    top: 12px;
    left: -1.025em;
    width: 8px;
    height: 1px;
    background-color: #666;
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

4 圆形#1

虽然可以通过将list-style-type样式属性值设置为disc来设置圆形列表符号,但这种方法设置的列表符号的表现形式在各浏览器中并不统一,可以通过下述代码使其统一,并自由指定符号的大小及颜色。

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .5em;
    left: -1em;
    width: 6px;
    height: 6px;
    background-color: #666;
    border-radius: 100%;
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

5 圆形#2

虽然可以通过将list-style-type样式属性值设置为circle来设置空心圆形列表符号,但这种方法设置的列表符号的表现形式在各浏览器中并不统一,可以通过下述代码使其统一,并自由指定符号的大小及颜色。

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .5em;
    left: -1em;
    width: 5px;
    height: 5px;
    background-color: #fff;
    border: 1px solid #3498db;
    border-radius: 100%;
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

6 圆形+箭头

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after,
ul li::before {
    display: block;
    content: '';
    position: absolute;
}
ul li::after {
    top: .35em;
    left: -1.2em;
    width: 14px;
    height: 14px;
    background-color: #3498db;
    border-radius: 100%;
}
ul li::before {
    z-index: 2;
    top: .625em;
    left: -.975em;
    width: 4px;
    height: 4px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

7 菱形

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .5em;
    left: -1em;
    width: 6px;
    height: 6px;
    background-color: #3498db;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

8 钩形

<style>
ul li {
    position: relative;
    list-style:none;
}
ul li::after {
    display: block;
    content: '';
    position: absolute;
    top: .5em;
    left: -1em;
    width: 8px;
    height: 3px;
    border-left: 2px solid #3498db;
    border-bottom: 2px solid #3498db;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
</style>

代码运行结果:

  • 示例文字
  • 示例文字
  • 第一行示例文字
    第二行示例文字

9 排序风格

使用counter-increment制作简单排序风格列表。虽然本示例中使用字符串,但是也可以使用::before伪元素选择器或::after伪元素选择器插入数字。

<style>
ol li {
    position: relative;
    list-style:none;
    padding-left:2.5em;
    counter-increment: li;
}
ol li::before {
    content: '第' counter(li) '名:';
    display: block;
    position: absolute;
    top: .3em;
    left: -1em;
    color: #666;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
}
</style>

代码运行结果:

  1. 苹果
  2. 香蕉