[questions/qa-upright-counters-in-vertical] Round border of ::marker for circled decimal

[yamahige]

[source] (https://w3c.github.io/i18n-drafts/questions/qa-upright-counters-in-vertical.html) [en]

How about using round border of ::marker to represent circled decimal in large ordered list?
This implementation requires border, border-radius, background-color, background-clipproperty for ::marker pseudo element. (added background-color)

The circle is not a part of the text:

• but, generated texts do not match for page search, and could not copy generated text
• not accessible

CSS

:root {
    writing-mode: vertical-rl;
    text-spacing-trim: trim-start;
    --color-grey: black;
}
ol.my {
    list-style: none;
    counter-reset: my-counter 0;
    li {
        counter-increment: my-counter;
    }
    li::before {
        content: counter(my-counter);
        text-combine-upright: all;
        border: thin solid var(--color-grey);
        border-radius: 50%;
        display: inline-block;
        padding-block: 0;
        padding-inline: 1px;
        margin-block: 1px;
        margin-inline-end: .5em;
    }
}
ol.my.grey li::before {
    color: white;
    background-color: var(--color-grey);
    background-clip: border-box;
}

HTML

<ol class="my">
    <li>仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li>すり潰した生芋</li>
    <li value="5">ながらのパケット式の定量練り、通称バタ練り機</li>
    <li>...</li>
    <li style="counter-set: my-counter 9;">「仕込む前に生芋を１／４ぐらいの大きさにカット。」</li>
    <li>（すり潰した生芋）</li>
    <li>ながらのパケット式の定量練り、通称バタ練り機</li>
    <li>...</li>
    <li style="counter-set: my-counter 99;">仕込む前に生芋を１／４ぐらいの大きさにカット。</li>
    <li>すり潰した生芋</li>
    <li>ながらのパケット式の定量練り、通称バタ練り機</li>
</ol>

<ol class="my grey">
    <li>ああああ</li>
    <li>「ああああああああああああああああああああ。」</li>
    <li>（ああ）ああ</li>
    <li style="counter-set: my-counter 9;">ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li style="counter-set: my-counter 98;">ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
    <li>ああああああああああああああああああああああああ</li>
</ol>