Левая рамка не перемещается

Question

Вертикальная граница слишком близка к «10» на шаге 10. Как левая граница перемещается вправо, так что есть некоторое пространство справа от большого «10» 'перед вертикальной границей?

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t margin-bottom: 20px; 
 
    padding: 0; 
 
     
 
    counter-reset: li-counter; 
 
} 
 

 
.custom-counter > li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t line-height: 1.5; 
 
    border-left: 2px solid #000; 
 
} 
 

 
.custom-counter > li::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -1em; 
 
    width: 0.8em; 
 

 
    font-size: 2.5em; 
 
    line-height: 1; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: #000; 
 
    
 
    content: counter(li-counter); 
 
    counter-increment: li-counter; 
 
}

<ol class="custom-counter"> 
 
    <li>Step 1</li> 
 
    <li>Step 2</li> 
 
    <li>Step 3</li> 
 
    <li>Step 4</li> 
 
    <li>Step 5</li> 
 
    <li>Step 6</li> 
 
    <li>Step 7</li> 
 
    <li>Step 8</li> 
 
    <li>Step 9</li> 
 
    <li>Step 10</li> 
 
</ol>

Answer 1

Просто установите margin-left на li теге (по мере необходимости), а затем изменить left атрибут подходит. Как так:

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t margin-bottom: 20px; 
 
    padding: 0; 
 
     
 
    counter-reset: li-counter; 
 
} 
 

 
.custom-counter > li { 
 
    position: relative; 
 
    margin-left:20px; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t line-height: 1.5; 
 
    border-left: 2px solid #000; 
 
} 
 

 
.custom-counter > li::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -1.2em; 
 
    width: 1em; 
 

 
    font-size: 2.5em; 
 
    line-height: 1; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: #000; 
 
    
 
    content: counter(li-counter); 
 
    counter-increment: li-counter; 
 
}

<ol class="custom-counter"> 
 
    <li>Step 1</li> 
 
    <li>Step 2</li> 
 
    <li>Step 3</li> 
 
    <li>Step 4</li> 
 
    <li>Step 5</li> 
 
    <li>Step 6</li> 
 
    <li>Step 7</li> 
 
    <li>Step 8</li> 
 
    <li>Step 9</li> 
 
    <li>Step 10</li> 
 
</ol>

Answer 2

.custom-counter { 
 
    list-style-type: none; 
 
/* list-style-type: decimal !ie; /*IE 7- hack*/ 
 
    margin: 0; 
 
    margin-left: 3.5em; 
 
\t margin-bottom: 20px; 
 
    padding: 0; 
 
     
 
    counter-reset: li-counter; 
 
} 
 

 
.custom-counter > li { 
 
    position: relative; 
 
    margin-bottom: 20px; 
 
    padding-left: 0.5em; 
 
    min-height: 3em; 
 
\t color: #000; 
 
\t font-size: 1.5em; 
 
\t line-height: 1.5; 
 
    border-left: 2px solid #000; 
 
} 
 

 
.custom-counter > li::before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -1.2em; 
 
    width: 1.2em; 
 

 
    font-size: 2.5em; 
 
    line-height: 1; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    color: #000; 
 
    
 
    content: counter(li-counter); 
 
    counter-increment: li-counter; 
 
}

<ol class="custom-counter"> 
 
    <li>Step 1</li> 
 
    <li>Step 2</li> 
 
    <li>Step 3</li> 
 
    <li>Step 4</li> 
 
    <li>Step 5</li> 
 
    <li>Step 6</li> 
 
    <li>Step 7</li> 
 
    <li>Step 8</li> 
 
    <li>Step 9</li> 
 
    <li>Step 10</li> 
 
</ol>

линий, которые изменяются внутри .custom-счетчика> LI :: раньше. оставил от -1em к 1.2em и ширина от 0.8em 1.2em, чтобы таким образом это линии хорошо.