CSS Ordered List Styling ::before Margins

Question

I'm using the code from here to style my ordered list 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;
}

When the text for a list item goes onto more than one line, the text goes to the left edge of the page. I want it to be in line with the text above it. Hopefully, the image below can explain this better.

I've tried adding a left margin onto the li CSS, but that moves the numbers as well.

Any help appreciated!

Thanks

Answer 1

Use positioning on li and li:before. Like:

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

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

Have a look at the snippet below:

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;
}

<ol class="custom-counter">
  <li>This is the first item</li>
  <li>This is the second item</li>
  <li>This is the third item Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure rem quia et quibusdam dolore impedit porro, velit voluptatibus odit? Rem doloremque quos, officia aut nulla distinctio itaque quisquam excepturi rerum.</li>
  <li>This is the fourth item</li>
  <li>This is the fifth item</li>
  <li>This is the sixth item</li>
  <li>This is the sixth item</li>
  <li>This is the sixth item</li>
  <li>This is the sixth item</li>
</ol

Hope this helps!