Auto generate numbering list in HTML using CSS #Part II -

in my previous question, i've been using css create auto generated list numbering <li></li> tags. in task, need create list have title in between of list picture shown below.

above example can achieve using below code

html

<ol class="main">     <span class="title">title</span>     <li>         content     </li>     <li>         content     </li>     <span class="title">title</span>     <li>         content     </li> </ol> 

css

ul {counter-reset:section} li {margin:15px 0;text-align:justify} li:before {counter-increment:section;content:""} .main {list-style-position:inside;list-style-type:none;padding:0} .main span {font-weight:700;text-decoration:underline} .inner {padding:0} .inner ul {counter-reset:section} .inner ul > li:before {content:""} ul {list-style-type:lower-alpha} 

however, code doesn't work in browser opera. because in html 5, <span></span> tag can't nested within element <ol></ol>.

jsfiddle work in firefox, chrome , internet explorer.

here's pure css version works in chrome 26 , ff 20 (haven't tested on other browsers). change earlier question don't need reset counter every time.

/* don't reset every time!!! */ /* ol.inner {counter-reset:section;} */  ol.inner li {counter-increment:section;} ol.inner li:before {content: counters(section,"") ". ";}