ネストされた疑似要素、そして縦書き順序付きリストの括弧付き番号を縦中横

Chome 135で`::before::marker`とか`::after::marker`のように疑似要素をネストしてスタイルを設定できるようになりました…

https://coliss.com/articles/build-websites/operation/work/chrome-135-adds-14-new-css-feature.html#h211

https://developer.chrome.com/release-notes/135?hl=ja#nested_pseudo_elements_styling

…これってどういうことだろう？ひょっとすると「縦書き順序付きリストの括弧付き番号で、番号だけを縦中横にする」のに使えるかもしれない。試してみました。

従来、生成されたテキストには構造がありませんでした。そこで例えば、括弧付き番号を生成するとして、生成した括弧と番号の色を変えたりといったことができませんでした。Chrome 135から、それができるようになりました。

## `::before::marker`の確認

次のようなHTMLで、`note`クラスの`p`要素に"1番目"、"2番目"、…と番号を生成することにします:

```html
<p class="note">疑似要素のネスト</p>
<p class="note">縦書きの箇条書き</p>
```

次のようなCSSにすると、Chrome 135では、生成した"1"と"番目"の色を変えられます。

```css
.note::before {
  display: list-item inline;
  counter-increment: note 1;
  margin-inline-end: .5em;
  content: "番目";
  color: orange;
}
.note::before::marker {
  content: counter(note);
  color: crimson;
}
:root {
  counter-reset: note 0;
}
```

次のような表示になると思います:

![before_marker.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930858/048b00f0-f643-47a5-ba4b-80a9413338d6.png)

ポイントは`::marker`疑似要素の順番だと思いました:

- `::before`疑似要素を`list-item`にします(`display: list-item;`)。`::marker`疑似要素は`list-item`にしかありません
- `::before`疑似要素の中の`::marker`疑似要素で番号を生成します。生成した番号は`::before`疑似要素で生成した"番目"の**前に**あります

## 縦書き順序付きリストの括弧付き番号を縦中横

さて、

縦書きの論文では文末にまとめた注や文献の番号を[縦中横](https://ja.wikipedia.org/wiki/%E7%B8%A6%E4%B8%AD%E6%A8%AA)にして、上下を括弧ではさむことがあります。

次のような順序付きリストを縦書きにして括弧付き番号を生成するのですが…

```html
<ol>
    <li>色は匂へど散りぬるを</li>
    <li>我が世誰ぞ常ならむ</li>
    <li>有為の奥山今日越えて</li>
    <li>浅き夢見し酔ひもせず。</li>
</ol>
```

番号だけを縦中横にして括弧は縦書きのままとします。"(99)"と生成されたテキストのうち、"99"だけを縦中横にするのです。自動生成したテキストに構造があってほしいのです。こういうのが従来はできませんでした。

Chrome 135でサポートされた`::before::marker`を使うと、かなり苦しいのですが、HTMLはそのままでCSSだけで実現できます。

```css
:root {
    writing-mode: vertical-rl; /* 縦書き */
}
ol {
    padding-inline-start: 2.5em;
}
ol li {
    display: list-item;
    list-style-type: none;
    text-indent: -2em;
}
ol li::marker {
    content: "（      "; /* 苦しい… */
}
ol li::before {
    display: list-item inline;
    content: "）";
}
ol li::before::marker {
    content: counter(list-item);
    text-combine-upright: all;
}
```

次のような結果になります:

![vertical_ordered_list.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3930858/58422c31-215b-47aa-933f-cadb4459dce6.png)

`li`要素がすでに`list-item`なのに、その疑似要素`li::before`もまた`list-item`だとはややこしい。さらに、`li`に`li::marker`がすでにあるのに、`li::before`にも`li::before::marker`があるなんて！ひょっとすると、何か勘違いがあるのかもしれません。

次の部分の"（      "の空白"      "は何のために付いてるのかというと、リストのインデントのためです。

```css
ol li::marker {
    content: "（      "; /* 苦しい… */
}
```

`::marker`疑似要素には`margin`プロパティが効かないので、"（"の位置を調整するために空白を付けてます。苦しい。

次のような大きなリストだと効果が分かりやすいと思います。

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="raNRWyb" data-pen-title="縦書き順序付きリストで括弧付き番号が縦中横" data-editable="true" data-user="yamahige" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamahige/pen/raNRWyb">
  縦書き順序付きリストで括弧付き番号が縦中横</a> by Taku Yamaguchi (<a href="https://codepen.io/yamahige">@yamahige</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

縦書き順序付きリストについては、縦中横を実現する`text-combine-upright`プロパティの`digits 2`などの値が実装されることが本筋と思います。ですが、とりあえずHTMLはシンプルなままに、括弧付きの縦中横番号を表示できました。