HTML+CSS修改li前原点的样式 - 倒打冲天子

HTML+CSS修改li前原点的样式

原样式：

html代码：

<ul>
    <li>这是一句话这是一句话这是一句话</li>
    <li>这是一句话这是一句话这是一句话</li>
    <li>这是一句话这是一句话这是一句话</li>
</ul>

css代码：

*{
        margin: 0;
        padding: 0;
    }
    ul{
        margin-top:28px;
        width: 480px;
        height: 270px;
        margin: 0 auto;
    }
    li{
        margin-top:13px;
        font-size:13px;
        color:#575757;
    }

先把默认的li前的原点删除，给li加list-style:none;属性。

再使用伪类元素li:before在li前添加新的样式：

    li{

        list-style: none;

        margin-top:13px;

        font-size:13px;

        color:#575757;

    }

/* 使用伪类选择器li:before在li前插入元素 
    content:"";是插入生成的内容，常与伪元素:before,:after配合使用*/
    li:before{
        content: "";
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #9d9d9d;
        /* border-radius:；圆角，使方形div变圆形 */
        border-radius: 50%;
        margin-right:10px;
        vertical-align: middle;
    }

结果如下：

也可以改成其他样式