疑似要素before,afterのz-index指定ができない

たまに遭遇するのですが、CSSで疑似要素を階層指定z-indexで指定したい場合があります。

まず疑似要素ではz-indexの階層指定はできないと考えてスタイルシートデザインを考えた方がよいでしょう。

z-index:-1を疑似要素に指定して要素内のテキスト下に配置することは可能ですが、元々の要素の下のレイヤーに配置することはできません。

この場合は疑似要素ではなく、独立したプロパティを指定して親要素を別に設定してposition指定してからz-indexでレイヤー指定することで回避するようになります。