列表li的样式

以前业务有遇到，不知道怎么实现，现在实现了顺便分享下

效果图：

主要是通过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;
		    }
复制代码