CSS で、自動折返しとなった要素をセレクターで指定する方法はあるでしょうか？

Question

前提・実現したいこと

「A | B | C」

などと区切りを設けて要素を並べたとき、幅が縮まったときに改行が入ってしまい、

「A | B |
 C」

のようになってしまうことがあります。

このとき、自動折返しの対象となった B をセレクターで選択できれば不要な「｜」を取ることができます。

自動改行された要素を取得する方法はあるでしょうか？

該当のソースコード

<style>
ul {
  display:flex;
  flex-wrap: wrap;
}
li {
  border-right: 1px solid gray;
}
li:last-child {
  border-right: none;
}
</style>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Answer 1

CSSでは難しいと思います。

gap を区切り線代わりに使う方法ぐらいしか思いつきませんでした。
サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/10pomu2c/

ul {
  display:flex;
  flex-wrap: wrap;
  gap: 0 1px;
  background: gray;
}

li {
/*  border-right: 1px solid gray; */
  background: white;
  width: 200px;
  flex: 1 1 auto;
}

Comments

[Maywood_Aaron]

ご返事遅くなり申し訳ありません。
言われてみればこの概念はGAP だと言えます。
したがってご回答は最適なやりかただと思いました。
ありがとうございます！

[Lhankor_Mhy]

お役に立てたようで何よりです。
ただ、背景を透明にできないのが難点ですよね……