I found a code snippet that I'm using to customize the styling of my ordered list. You can check it out here: http://codepen.io/sawmac/pen/txBhK
Here is the HTML code:
<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>
And the CSS code:
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;
}
I'm facing an issue where the text of a list item goes to the left edge of the page when it spans multiple lines. I want it to be aligned with the text above it. Here is an image that illustrates the problem: https://i.sstatic.net/7T2p6.png
I've tried adding a left margin to the li CSS, but it also affects the numbers. Any suggestions on how to solve this would be greatly appreciated!
Thank you!