Can the numbers of an ordered list be formatted using the list-position-style set to outside? I am looking for a solution using only CSS since I cannot edit the HTML. Essentially, I want styled numbers with round background to replace the outside numbers. Thank you!
ol {
list-position-style: outside;
counter-reset: item;
}
li {
counter-increment: item;
margin-bottom: 5px;
}
li:before {
margin-right: 10px;
content: counter(item);
background: lightblue;
border-radius: 100%;
color: white;
width: 1.2em;
text-align: center;
display: inline-block;
}<ol>
<li><span>blah blah blah.</span>
<ol type="a" class="ol substeps">
<li>blah blah</li>
<li>blah</li>
</ol>
</li>
<li>blah blah blah blah</li>
</ol>