<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 200px;
height: 500px;
margin: 50px auto;
}
li {
height: 20px;
}
i {
display: inline-block;
width: 16px;
height: 16px;
background: url(./img/bg.png);
margin-left: 4px;
}
li:nth-of-type(2) i {
background-position: 0 -25px;
}
li:nth-of-type(3) i {
background-position: 0 -50px;
}
li:nth-of-type(4) i {
background-position: 0 -75px;
}
li:nth-of-type(5) i {
background-position: 0 -100px;
}
li:nth-of-type(6) i {
background-position: 0 -125px;
}
li:nth-of-type(7) i {
background-position: 0 -150px;
}
li:nth-of-type(8) i {
background-position: 0 -175px;
}
li:nth-of-type(9) i {
background-position: 0 -195px;
}
li:nth-of-type(10) i {
background-position: 0 -220px;
}
li:nth-of-type(11) i {
background-position: 0 -245px;
}
li:nth-of-type(12) i {
background-position: 0 -275px;
}
li:nth-of-type(13) i {
background-position: 0 -300px;
}
li:nth-of-type(14) i {
background-position: 0 -330px;
}
li:nth-of-type(15) i {
background-position: 0 -355px;
}
li:nth-of-type(16) i {
background-position: 0 -385px;
}
li:nth-of-type(17) i {
width: 9px;
height: 9px;
background-position: -1px -415px;
}
</style>
</head>
<body>
<ul>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
<li>哈哈哈哈<i></i></li>
</ul>
</body>
</html>
效果图: