文本在换行时没有左填充

Question

我有一个简单的问题，但无法解决，这是我的 html 和 css

.listPo {
    list-style: none;
    counter-reset: item;
    padding-left: 0.2em;
}
.listPo>li {
  counter-increment: item;
  margin-bottom: 8px;
  font-size: 15px;
}
.listPo>li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0e4b78;
  color: white;
  width: 1.5em;
  text-align: center;
  display: inline-block;
  padding-left: 1px;
  padding-right: 2px;
}

<ol class="listPo">
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
</ol>

我要达到的目标是：

谁能帮我解决这个问题，我不知道哪里做错了？

Answer 1

还有更多方法，例如将padding设置为整个LI，将position: absolute设置为反（:before伪元素）。

.listPo {
    list-style: none;
    counter-reset: item;
    padding-left: 0.2em;
}
.listPo>li {
  counter-increment: item;
  margin-bottom: 8px;
  font-size: 15px;
  padding-left: calc(1.5em + 10px);
  position: relative;
}
.listPo>li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0e4b78;
  color: white;
  width: 1.5em;
  text-align: center;
  display: inline-block;
  padding-left: 1px;
  padding-right: 2px;
  position: absolute;
  top: 0; 
  left: 0;
}

<ol class="listPo">
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
   <li>
      <a href="h#">
      gfsdgsdfgsdf
      </a>
      ,Chemica Actaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </li>
</ol>

文本在换行时没有左填充

Text, when is in new line, has no left padding

html

css

html-lists