html - 左边框不会移动

Question

在第 10 步中，垂直边框太靠近“10”了。如何将左边框向右移动，以便在垂直边框之前的大“10”右侧有一些空间？

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

.custom-counter > li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 0.5em;
    min-height: 3em;
	color: #000;
	font-size: 1.5em;
	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

只需在 li 标签上设置一个 margin-left(根据需要)，然后适本地更改 left 属性。像这样:

.custom-counter {
    list-style-type: none;
/*    list-style-type: decimal !ie; /*IE 7- hack*/
    margin: 0;
    margin-left: 3.5em;
	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;
	color: #000;
	font-size: 1.5em;
	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>