HTML - ordered list, styling the list numbers like (a), (i), (aa)

I have attached my HTML and CSS file.

What I need: the "a." should be enclosed within () like (a) and the "i" in the next level as (i) and under the "i" the list number shown as "1" should be displayed as (aa) next as (ab) and so on.

I want the alignment to remain as it is and only the styling to change inline with my expectations. How to do this?

Note: The solution shouldn't cause change in alignment and JavaScript isn't allowed

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}

<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol type="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol type="i">
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol type="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>
              Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>

Solution

As far as I know, the styling of list numbers with braces is currently not possible. There was a section in the CSS3 spec about custom defining counter styles and using it along with list-style-type but it doesn't seem to be implemented fully yet (atleast not cross-browser) and so your best bet would be to use counters for custom styling the list numbers instead of using the default list style types.

While using counters, we just have to assign one counter for each level, reset/initialize the counter at its corresponding ol tag, increment the counter's value whenever a li is encountered and display the value of the counter before the text using :before pseudo-element. Counter values are displayed using the content property of pseudo-elements and hence the braces can easily be added (it is just like doing string concatenation).

For the (aa), (bb) styles, there is defined counter-style-type and like varun aaruru had mentioned in his comment, there is no pre-defined counter/list style for this and such a value comes only after alphabet z is reached. In default ol styling this could be done giving a start value but it still does not produce the brackets and so we again have to use counters. In counters, we can achieve this by resetting the counter's initial value itself to 26 (z is the 26th alphabet).

The below snippet produces the output that you are looking for.

p.p1 {
  text-indent: 0cm;
  margin-left: 36;
  word-break: break-all;
}
li {
  list-style-position: inside;
  margin-top: 10pt;
  word-break: break-all;
}
li::before {
  content: "";
  width: 13pt;
  display: inline-block;
}
.ol1 {
  padding-left: 2pt;
}
.pNote {
  text-indent: 0cm;
  margin: 0cm 0cm 10pt;
}

/* initialize counters */

ol.a {
  counter-reset: list-item-level2;
}
ol.i {
  counter-reset: list-item-level3;
}
ol.aa {
  counter-reset: list-item-level4 26;
}

/* nullify default list styling */

ol.a li,
ol.i li,
ol.aa li {
  list-style-type: none;
}

/* reset the word break for pseudo elements */

ol.a li:before,
ol.i li:before,
ol.aa li:before {
  word-break: normal;
}

/* increment the counters */

ol.a li {
  counter-increment: list-item-level2;
}
ol.i li {
  counter-increment: list-item-level3;
}
ol.aa li {
  counter-increment: list-item-level4;
}

/* display the counter values */

ol.a li:before {
  content: '('counter(list-item-level2, lower-latin)')';
  margin-right: 16px;
}
ol.i li:before {
  content: '('counter(list-item-level3, lower-roman)')';
  margin-right: 16px;
}
ol.aa li:before {
  content: '('counter(list-item-level4, lower-latin)')';
  margin-right: 28px;
}

<ol class="ol1">
  <li>FirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirstFirst
    <ol class="a">
      <li>Bullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-aBullet-a
        <ol class='i'>
          <li>Bullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-iBullet-i
          </li>
          <ol class="aa">
            <li>Bullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aaBullet-aa
            </li>
            <li>Bullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-abBullet-ab
            </li>
          </ol>
          <li>
            Bullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-iiBullet-ii
          </li>
        </ol>
      </li>
      <li>
        Bullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-bBullet-b
      </li>
    </ol>
  </li>
  <li>
    SecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecondSecond
  </li>
  <li>
    ThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThirdThird
  </li>
</ol>