CSS List Style sample

CSS List Style 是一個比較常用的敘列資訊的方式，通常都是用來列舉POINT FORM或是作為目錄時使用。可以一般常用的<ul><li>style 來來回回都是那一兩個。今天就分享一些小編會用到的List Style CSS 樣版。

一些傳統的圖案:

.one { list-style-type: disc; }
.two { list-style-type: circle; }
.three { list-style-type: square; }
.four { list-style-type: none; }

可以自訂字符 例如 “*” :

ul li { list-style: none; }
ul li::before { content: ‘*’;}

可以自訂線性漸變顏色:

ul li:before { background: linear-gradient(45deg, #fff0f6, #5f5d58); }

可以把文字加底色:

ul li {
list-style-type: none;
counter-increment: item;
}
ul li:before {
content: counter(item);
margin-right: 5px;
font-size: 80%;
background-color: #f9dd94;
color: #7eb4e2;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}

可以自訂自選圖案:

ul li {
  list-style: none;
  padding-left: 50px;
  position: relative;
}

ul li:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 5px;
  display: inline-block;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-image: url("imgages/xxxx.png");
}