Search code examples
htmlcsshtml-lists

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

I have simple problem but am not able to fix it, here is my html and 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>

What am trying to achieve is this:

enter image description here

Can anybody try to help me with this, I don't know what am doing wrong?

Solution

  • There are more ways, for example set padding to whole LI and position: absolute to counter (:before pseudoelement).

    .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>