┌──────────────────────────────────────┐
│.css {                                                                      │
│    background-color  :中;                                                  │
│}                                                                           │
│.css::before {                                                              │
│    content           :"奥";                                                │
│    background-color  :奥;                                                  │
│}                                                                           │
│.css::after {                                                               │
│    content           :"手前";                                                │
│    background-color  :手前;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
この場合、テキスト的には「奥 中 手前」の順に表示されるのだが
レイヤー的にも以下かと思いきや、以下なのだ
┌──────────┐┌──────────┐
│×┌───┐        ││○┌───┐        │
│  │奥┌───┐    ││  │中┌───┐    │
│  │  │中┌───┐││  │  │奥┌───┐│
│  │  │  │手前  │││  │  │  │手前  ││
└──────────┘└──────────┘

んじゃ、期待する左のようにするにはどうすればよいか？
┌──────────────────────────────────────┐
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
「z-index」をマイナスで指定したあげればよい。(::afterでも同じ)

ただ注意点があって、本体(中)の方に「z-index」を指定してはいけない。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css::before {                                                              │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
こんな感じたよ奥にはいかない。

でも、本体(中)の方に「z-index」を指定したい、という時は、
「z-index」を指定する層を外側に出せばいいようだ。
┌──────────────────────────────────────┐
│.css {                                                                      │
│    z-index           :2;                                                   │
│}                                                                           │
│.css > div {                                                                │
│}                                                                           │
│.css > div::before {                                                        │
│    z-index           :-1;                                                  │
│}                                                                           │
└──────────────────────────────────────┘
HTML側はこれに伴い「<div class="css"><div></div></div>」みたいに入れ子にする。