以前业务有遇到,不知道怎么实现,现在实现了顺便分享下
效果图:
主要是通过CSS3::before属性实现
HTMl
<ul>
<li>我的li元素</li>
<li>我的li元素</li>
<li>我的li元素</li>
<li>我的li元素</li>
<li>我的li元素</li>
</ul>
复制代码
CSS
li {
list-style: none;
}
ul>li {
position: relative;
padding-left: 20px;
line-height: 40px;
}
ul>li::before {
content: "";
position: absolute;
top: 50%;
left: 0;
margin-top: -5px; //垂直居中
width: 10px;
height: 10px;
border-radius: 100%;
background: gold;
}
ul>li:hover::before{
background: darkgoldenrod;
}
复制代码