Remove css numbering, use JS instead

client/src/components/content-blocks/ContentListBlock.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="content-list-block__container">
     <div class="content-list-wrapper">
-      <ol class="content-list" :style="`counter-reset: list ${startingIndex}`">
+      <ol class="content-list">
-        <li class="content-list__item contentlist-item" :key="contentBlock.id" v-for="contentBlock in contentBlocks">
+        <li class="content-list__item contentlist-item"
+            :key="contentBlock.id"
+            v-for="(contentBlock, index) in contentBlocks">
+          <p class="content-list__numbering">{{alphaIndex(index)}})</p>
           <content-block :contentBlock="contentBlock"></content-block>
         </li>
       </ol>
@@ -12,7 +15,8 @@
 </template>
 
 <script>
-  // import ContentBlock from '@/components/ContentBlock';
+
+  const lowerAsciiA = 97;
 
   export default {
     props: ['contents', 'parent', 'startingIndex'],
@@ -23,6 +27,12 @@
       ContentBlock: () => import('@/components/ContentBlock')
     },
 
+    methods: {
+      alphaIndex(index) {
+        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
+      }
+    },
+
     computed: {
       contentBlocks() {
         return this.contents.map(contentBlock => {
@@ -48,16 +58,14 @@
         list-style: none;
         position: relative;
         padding: 0 2*15px;
+      }
 
-        &::before {
+      &__numbering {
           position: absolute;
           font-weight: 600;
           left: 0;
           color: $color-brand;
-          content: counter(list, lower-alpha) ") ";
-          counter-increment: list;
           line-height: 27px;
-        }
       }
     }
   }