Custom style for the CSS counter (using @counter-style)

As of 01/2019, this feature is only implemented in Firefox

by Konstantin Rouda

HTML

<form>
    Formula: 
    <input type="text" name="math" required list="autoList" />
    <datalist name="formula" id="autoList">
    <option value="sin">sin</option>
     <option value="cos">cos</option>
     <option value="tan">tan</option>
     <option value="cot">cot</option>
    </datalist><br />
    Iterations: <input name="iterations" type="range" min="1" max="10"><br />
    Precision: <input name="precision" type="number" min="1" max="100" value="50"><br />
    <label for="firstCheckbox" class="c-form__label">
      <input type="checkbox" id="firstCheckbox">      
    </label>
    <label for="secondCheckbox" class="c-form__label">
      <input type="checkbox" id="secondCheckbox">      
    </label>
    <label for="thirdCheckbox" class="c-form__label">
      <input type="checkbox" id="thirdCheckbox">      
    </label>
    <label for="fourthCheckbox" class="c-form__label">
      <input type="checkbox" id="fourthCheckbox">      
    </label>
    <label for="fifthCheckbox" class="c-form__label">
      <input type="checkbox" id="fifthCheckbox">      
    </label>
  </form>

CSS

HTML {
  /*using system font-stack*/
  font-family: Mina, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 115%; /*~18px*/
  line-height: 1.5;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: rgb(58, 61, 64);
  background-color: rgb(240, 240, 240);
}

*, *::before, *::after {
  box-sizing: inherit;
  color: inherit;
}

/*==================Actual Style================================*/

/**
  As of 01/2019 this feature is only implemeneted in Firefox
*/
@counter-style custom-counter-style {
  system: symbolic;
  symbols: "Tom" "Jack" "Jully" "Anna" "Dan";
}

FORM {
  counter-reset: custom-counter;
}

.c-form__label {
  position: relative;
  display: block;
  counter-increment: custom-counter;
}

.c-form__label::before {
  content: counter(custom-counter, custom-counter-style);
/*   position: absolute;
  left: 0; */
  margin-right: 1rem;
  padding-left: 1rem;
}

JavaScript

/*
Custom style for the CSS counter (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters)
using @counter-style (https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style) [demo page: https://mdn.github.io/css-examples/counter-style-demo/].
As of 01/2019, this feature is only implemented in Firefox
*/