li标签美化让页面的li标签更好看

在 HTML 中 <li> 标签可以用来定义列表，使用 <li> 标签定义的列表可以是个无序列表也可以是有序列表。

在写文章时候li标签经常用到，如果使用ul下的li标签默认前面有一个小黑点，由于是固定的黑色，有时候难免和你的网页设计起来不搭，这里分享几种精美li标签样式。

案例1

去掉li标签前面的黑点

ul,li{list-style:none;}

案例2

  .entry-content ul li:before {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    line-height: 28px;
    margin: 0 12px 0 0;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    font-style: normal;
    background-color: #c2c2c2;
    text-align: center;
    content: counter(mycounter);
}
.entry-content ul li{counter-increment: mycounter;list-style-type:none}

案例3

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