Question 389475 in Html Question posted in
Some basic documentation can be found here.

Html – CSS class to make ordered list with circled numbers

I’m using Pandoc Markdown, which allows Makrdown to nest inside of HTML tags. I want to get ordered lists with circled numbers as follows:

<ol>
  <li style="list-style-type: '❶  '">
    First item
  </li>
  <li style="list-style-type: '❷  '">
    Second item
  </li>
</ol>

But instead I want to write them in markdown, and a CSS class to handle the rest:

<div class="circled-numbers">

1. First item
2. Second item

</div>
  1. It’s ok for this to work only up to 9 items.
  2. This needs to work in Safari.
  3. Accessibility is important.
  4. Need to customize circled numbers fonts without affecting the font of the list items.

Note, for the above Markdown snippet, Pandoc will generate:

<div class="circled-numbers">
  <ol>
    <li>
      First item
    </li>
    <li>
      Second item
    </li>
  </ol>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I got the following working.

    .circled-numbers ol {
    list-style-type: none;
    padding-left: 1.65em;
}

.circled-numbers ol li:nth-child(1)::before { content: '❶'; padding-right: 0.5em; font-family: monospace; }
.circled-numbers ol li:nth-child(2)::before { content: '❷'; padding-right: 0.5em; font-family: monospace; }
.circled-numbers ol li:nth-child(3)::before { content: '❸'; padding-right: 0.5em; font-family: monospace; }
/* And so on... */

  2. 0

    You can define your own list styles:

    @counter-style circled-decimal {
    system: fixed 0;
    symbols: '24EA' '2460' '2461' '2462' '2463' '2464' '2465' '2466' '2467' '2468' '2469' '246A' '246B' '246C' '246D' '246E' '246F' '2470' '2471' '2472' '2473' '3251' '3252' '3253' '3254' '3255' '3256' '3257' '3258' '3259' '325a' '325b' '325c' '325d' '325e' '325f' '32b1' '32b2' '32b3' '32b4' '32b5' '32b6' '32b7' '32b8' '32b9' '32ba' '32bb' '32bc' '32bd' '32be' '32bf';
/* symbols: '⓪' '①' '②' '③' '④' '⑤' '⑥' '⑦' '⑧' '⑨' '⑩' '⑪' '⑫' '⑬' '⑭' '⑮' '⑯' '⑰' '⑱' '⑲' '⑳' '㉑' '㉒' '㉓' '㉔' '㉕' '㉖' '㉗' '㉘' '㉙' '㉚' '㉛' '㉜' '㉝' '㉞' '㉟' '㊱' '㊲' '㊳' '㊴' '㊵' '㊶' '㊷' '㊸' '㊹' '㊺' '㊻' '㊼' '㊽' '㊾' '㊿'; */
    suffix: ' ';
}

.circled-numbers ol {
   list-style: circled-decimal;
}
    <div class="circled-numbers">
  <ol>
    <li>
      First item
    </li>
    <li>
      Second item
    </li>
  </ol>
</div>

    https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search