z-index : auto を calc();を利用して逆行させることは可能か？

Question

前提・実現したいこと

すいません、初心者です。教えてください。
z-index:auto;は記述順に値が増えていくと思うんですが、
calc();を使って逆行させていくことはできるでしょうか？

なるべくコードを少なくしたいと考えて、
liタグが持つidの"b"部分一致させつつ、
calc();を用いようと考えましたが上手くできませんでした。

陳列イメージ

[one]two]three]four]five]

該当のソースコード

HTML >>>>

<ul>
    <li id="a1"> One    </li>
    <li id="b1"> Two    </li>
    <li id="b2"> Three </li>
    <li id="b3"> Four   </li>
    <li id="b4"> Five    </li>
</ul>

CSS >>>>

ul {
    list-style: none;
    position: relative;
    padding: 10px;
}
li {
    display: inline-block;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 0 -10px;
    width:35px;
}
ul li[id*="b"]{
    margin-left:calc(20px * -0.7);
    z-index:auto;
    }

試したこと

    z-index:calc(auto * -1);

    z-index:calc(-100 + auto );

Comments

[Lhankor_Mhy]

無理っぽい、という記事がありましたのでご紹介します。
https://dev.to/cadienvan/the-unsolvable-z-index-auto-increment-3l77

[Kosketu]

やっぱりできませんかぁ、、https://jsfiddle.net/0841sdwc/　こちらでも同様に書いてありました。
出来てもcontentだけのようですね…。勉強になりました！！ありがとうございます！！

[miyabi_pudding]

やりたくなる気持ちは死ぬほどわかります。

解決したなら、自己解決の投稿をして、質問を閉じましょう。

[Lhankor_Mhy]

Issue はあるようですね。がんばればレベル4で採用されるかも？
https://www.w3.org/TR/css-lists-3/#issue-4b0c2d48

Answer 1

質問への追記・修正の依頼にて教えてもらった通り、デクリメント指定は出来ない様だったので、
Javascriptを使うことにした。（初めてスプレッド構文を使ってみた。）
書き方が素人でほんとすいません。
参考サイト：https://qiita.com/mtoutside/items/548cb6b08c160ba6e514

ul {...}

li {
    position: relative;     <<<< 追記
    display: inline-block;
    background: #eee;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px;
    margin: 0 -10px;
    width:35px;

ul li[id*="b"]{...}

const disZIndex = () =>{
  const array = [...document.querySelectorAll('[id*=b]')];
  console.log(array);
  for(let i = 0; i < array.length; i++){
  let x = array[i].id;
  document.getElementById(x).style.zIndex = -10 - i;
  }
}

func1();