疑似要素をimgタグのように可変化し、absoluteして margin: 0 auto; のような挙動を実現する

タイトルのままですが、分かりづらいので満たしたい要件を下記に挙げます。

• 疑似要素をmax-width: 980px 相当のコンテンツの左端に配置したい。（中央に寄せたコンテンツの左端に来るようにする。margin: 0 auto; のような挙動を想定。）
• まるでimgタグのように可変にしたい。
• 画像の最大値は384pxで制御する。

HTMLタグを書けば簡単に実現できる内容ですがCSSだけで実現するにはそれなりに知識が必要です。

// 画像を可変にする
.hoge::after {
  content: "";
  display: block;
  width: 39.184%; /* (デザインデータの横幅 / 画像素材の横幅) x 100 */
  max-width: 384px; /* 画像素材の横幅（これ以上大きくならないようにする） */
  height: auto; /* aspect-ratioで高さを決めるので明示的に無効化しておく（省略可） */
  aspect-ratio: 384 / 786; /* 画像素材の比率（縦サイズを自動リサイズ） */
  background: url("decoration.png") no-repeat center center;
  background-size: 100% auto; /* 画像を可変にする */
}

// max-widthの中央揃えのような動きを作る（最大値980pxのときのmargin-leftの値を取りたい）
.hoge::after {
  position: absolute;
  top: 0;
  left: calc((100% - min(100%, 980px)) / 2); /* 横幅全体 - max-width 980px相当 を2で割ることで margin-left: auto; と同じ値が出る */
}

上記のようなコードで実現できます。
aspect-ratio や min関数 をフルで活用することで疑似要素でも複雑な要件を満たすことができます。

min() 関数は今後さらに多用されることになるでしょう。
表現の幅がかなり広がります！

対応ブラウザとしては、
PCブラウザであれば今からでも使えるレベルです。
スマホではiOS15以上であれば問題ありません。iOS14に対応したい場合は aspect-ratio を別の方法で実装する必要があります。