/* Got this from
https://blog.teamtreehouse.com/customize-ordered-lists-pseudo-element
In your HTML, put something like
This is the first item
This is the second item
This is the third item
This is the fourth item
This is the fifth item
This is the sixth item
and in the ,
below the link to main.css.
Here's the magic. Note that "list-style-position: outside;"
doesn't work here so there's some manual fiddling based on a comment
in the above post.
*/
.custom-counter
{
/* margin-left: 0;
padding-right: 0;
*/ position: relative;
padding-left: 0;
list-style-type: none;
}
.custom-counter li
{
counter-increment: step-counter;
margin-bottom: 4px;
}
.custom-counter li:last-child
{
margin-bottom: 0
}
/* "step-counter" is just an arbitrary name to link the above
* to what's below. It could as easily be "foo".
*/
.custom-counter li::before {
content: counter(step-counter) ")";
margin-right: 5em;
/*position: absolute;*/
left: 0;
padding: 0px 5px;
/* the rest of this produces what is shown in
https://codepen.io/sawmac/pen/txBhK
but I think we don't need it
font-size: 80%;
background-color: rgb(200,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
*/
}