如何自定义数字样式＆＃34; li＆＃34;在css

Question

我必须自定义此元素 - http://gyazo.com/d1ff34edc28a5d2f15068a4a523aecce 对此观点 http://gyazo.com/8d191a943bef6da9df1b2fd3cc9be56b 我怎么能这样做

Answer 1

见下文，希望它能起作用：）

ul {
  counter-reset: section;
}
li {
  list-style: none;
  margin-bottom: 10px;
}
li:before {
  counter-increment: section;
  content: counter(section);
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
  text-align: center;
  font-size: 16px;
  color: #fff;
  border-radius: 100%;
  vertical-align: top;
}

<ul>
  <li>Hello world!</li>
  <li>Hello world!</li>
  <li>Hello world!</li>
  <li>Hello world!</li>
  <li>Hello world!</li>
</ul>

Answer 2

为你做了一个例子。

http://jsfiddle.net/ZakharDay/k3rb2x4s/

ol {
    counter-reset: li;
    list-style-type: none;
}

ol li {
    list-style: none;
    margin-bottom: 20px;
    line-height: 23px;
}

ol > li:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;
    display: inline-block;
    margin-left: -30px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color: green;
    color: white;
    border-radius: 10px;
}

复制

CSS : Styling the content of before pseudo element on a list

Answer 3

这是解决方案，但我不确定你能改变子弹的颜色（用铬测试）

＆＃13;

＆＃13;

ol{
    list-style-position: inside;
    padding-left:0;
}
li:before{
    content: '';
    display: inlie-block;
    position: absolute;
    background: green;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    left: 2px;
    z-index: -1;    
}

＆＃13;

<ol>
    <li>Text 1</li>
    <li>Text 2</li>
    <li>Text 3</li>
    <li>Text 4</li>
</ol>

＆＃13;

＆＃13;

＆＃13;