CSS 有序列表样式 ::before Margins

Question

我正在使用这里的代码来设计我的有序列表http://codepen.io/sawmac/pen/txBhK

HTML

<ol class="custom-counter">
<li>This is the first item</li>
<li>This is the second item</li>
<li>This is the third item</li>
<li>This is the fourth item</li>
<li>This is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item is the fifth item</li>
<li>This is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item is the sixth item </li>
</ol>

CSS

body {
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}

.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
}

.custom-counter li::before {
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

当列表项的文本超过一行时，文本将移至页面的左边缘。我希望它与上面的文字一致。希望下图可以更好地解释这一点。

我试过在 li CSS 上添加一个左边距，但这也会移动数字。

任何帮助表示赞赏！

谢谢

Answer 1

在li和上使用定位li:before。喜欢：

li {
  position: relative;
  padding-left: 35px;
}

li:before {
  position: absolute;
  left: -5px;
}

看看下面的片段：

li {
  position: relative;
  padding-left: 35px;
}

li:before {
  position: absolute;
  left: -5px;
}

body {
  font-size: 1.2em;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  margin: 50px;
}

.custom-counter {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.custom-counter li {
  counter-increment: step-counter;
  margin-bottom: 10px;
  position: relative;
  padding-left: 35px;
}

.custom-counter li::before {
  position: absolute;
  left: -5px;
  content: counter(step-counter);
  margin-right: 5px;
  font-size: 80%;
  background-color: rgb(0,200,200);
  color: white;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 3px;
}

希望这可以帮助！