How to customize unordered lists position? - css

Question

I'm struggling with styling a simple ordered list to look this:
The HTML must be standard html like:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
I've tried a bunch of different ways with list-style-position: inside, text-indent, etc... but I can't seem to make it perfect. I need to have the number inside the background color and the text lined up correctly when wrapping. And also would like some space between the number and the text. Is it even possible?

Answer 1

This should do it, the idea is displaying the counter as absolute positioned pseudo content.
JsFiddle Example
ol {
list-style: none;
padding: 0;
margin: 0;
}
ol li {
counter-increment: step-counter;
background: lightgreen;
padding: 20px 20px 20px 50px;
margin-bottom: 8px;
position: relative;
}
ol li:before {
content: counter(step-counter) ".";
position: absolute;
left: 20px;
}
<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
</ol>

Answer 2

You have to style it like this:
Css:
ol{
list-style-position: inside;
padding:0;
margin:0;
}
li{
margin:0 0 5px;
border:2px solid white;
background:yellow;
padding:20px;
width:500px;
height:30px;
}
html:
<ol>
<li>asdf asdf</li>
<li>asdfasdfasdf</li>
<li>asdfasdf</li>
<li>asdf...</li>
</ol>
http://jsfiddle.net/u4rqyo4L/3/