擬似要素にbackground-imageを入れて横並び

##目的
擬似要素で、background-imageで画像を入れ、横並びにする

過程

1-1、擬似要素に、background-iamgeで画像を入れる
1-2、擬似要素には、content:""; プロパティーが必須。
1-3、画像の幅、高さを指定する場合、セレクタターをblcokまたはinline-blickに変更する
1-4、親要素のwrapperにいつものflexを指定する

slim

.wrapper
  p ほげほげ

scss

wrapper {
  width: 400px;
  height: 400px;
  margin: 0 auto;
  background-color: #ccc;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  &::before {
    content: "";
    display: inline-block;
    background-image: url("tonbo.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid #cccc;
    width: 100px;
    height: 100px;
  }
  &::after {
    content: "";
    display: inline-block;
    background-image: url("tonbo.png");
    background-size: contain;
    background-repeat: no-repeat;
    border: 1px solid #cccc;
    width: 100px;
    height: 100px;
  }
}