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;
    }

結果如下：

也可以改成其他樣式