列表前面红色的圆和数字怎么做

<style>
li{list-style:none;}
li span{width: 20px;height:20px;line-height:20px;text-align: center;background:#f00;display:inline-block;color:#fff;border-radius:50%;margin-right:5px;}
</style>
<ul>
    <li><span>1</span>模压的撒范德萨范德萨发生大地</li>
    <li><span>2</span>模压的撒范德萨范德萨发生大地</li>
    <li><span>3</span>模压的撒范德萨范德萨发生大地</li>
    <li><span>4</span>模压的撒范德萨范德萨发生大地</li>
    <li><span>5</span>模压的撒范德萨范德萨发生大地</li>
</ul>

圆点就是一个背景，border-radius 设置成50%，上面打上数字，然后调整位置和字体大小即可