Custom list counter

[mhulse]

Example 1

<ol class="ap_box-list">
    <li><a class="ap_box-list-selected" href="#">Stay safe! Have a Safety Plan.</a></li>
    <li><a href="#">Shift focus to you.</a></li>
    <li><a href="#">Give yourself a break.</a></li>
</ol>

.ap_box-list,
.ap_box-list li {
    margin: 0;
    padding: 0;
}
.ap_box-list li {
    counter-increment: item;
    list-style: none;
    position: relative;
}
.ap_box-list li + li {
    margin-top: 1rem;
}
.ap_box-list a {
    display: block;
}
.ap_box-list a,
.ap_box-list a:visited {
    color: #000;
    font-weight: 700;
    text-decoration: none;
}
.ap_box-list a:visited:hover,
.ap_box-list a:focus,
.ap_box-list a:focus:hover,
.ap_box-list a:hover,
.ap_box-list a:active,
.ap_box-list a.ap_box-list-selected {
    background: #f2f2f2;
    color: #000;
    text-decoration: none;
}
.ap_box-list a::before {
    background: #91ca42;
    color: #fff;
    content: counter(item);
    display: inline-block;
    height: 3rem;
    line-height: 3rem;
    margin-right: 1.5rem;
    text-align: center;
    width: 3rem;
}
.ap_box-list a::after {
    border-color: transparent transparent transparent #91ca42;
    border-style: solid;
    border-width: 1rem;
    content: '';
    height: 0;
    left: 3rem;
    position: absolute;
    top: 0.5rem;
    width: 0;
}

Example 2

<ol class="ap_list-main">
    <li>
        <h3 class="ap_list-main-head">Stay safe</h3>
        <p class="ap_list-main-body">Follow your Safety Plan should your partner get physically aggressive.</p>
    </li>
    <li>
        <h3 class="ap_list-main-head">Shift your focus to you</h3>
        <p class="ap_list-main-body">Start identifying problems that come up with your partner, based on what they’re doing to you.  Make your own changes to improve your life. Don’t assume he has to change before you can feel better. Realize you can’t quit drinking for him, but you can change how you deal with it.</p>
    </li>
    <li>
        <h3 class="ap_list-main-head">Take a break</h3>
        <p class="ap_list-main-body">Build some fun and interesting activities into your routine, to help reduce your stress.</p>
    </li>
</ol>

.ap_list-main,
.ap_list-main li {
    margin: 0;
    padding: 0;
}
.ap_list-main li {
    counter-increment: item;
    list-style: none;
    margin-left: 2rem;
    padding-left: 2.5rem;
    position: relative;
}
.ap_list-main li > :first-child {
    margin-top: 0 !important;
}
.ap_list-main li > :last-child {
    margin-bottom: 0 !important;
}
.ap_list-main li + li {
    margin-top: 2rem;
}
.ap_list-main .ap_list-main-head {
    font-size: 2rem;
    margin: 0;
    padding: 0;
}
.ap_list-main .ap_list-main-head::before {
    content: counter(item) ".";
    left: 0;
    position: absolute;
    top: 0;
}
.ap_list-main .ap_list-main-body {
    margin: 0;
    padding: 0;
}
.ap_list-main .ap_list-main-head + .ap_list-main-body {
    margin-top: 0.5rem;
}

Example 3

.li1,
.li2,
.body ol,
.body ul {
  counter-reset: li;
}
.li1 > li::before,
.li2 > li::before,
.body ol > li::before,
.body ul > li::before {
  font-family: Cambria, Georgia, serif;
  font-weight: bold;
  color: #cca700;
  margin-top: 0.71428571428571rem;
  margin-bottom: 0.17857142857143rem;
  display: block;
  content: counter(li,lower-roman);
  counter-increment: li;
}
.li1 > li:first-child::before,
.li2 > li:first-child::before,
.body ol > li:first-child::before,
.body ul > li:first-child::before {
  margin-top: 0;
}

.li2 > li::before,
.body ul > li::before {
  content: counter(li,square);
  margin-bottom: 0.11904761904762rem;
}