Как настроить стиль цифровых «ли» в 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

Вот решение, но я не уверен, что вы можете изменить цвет пули (проверено в хроме)

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

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