css странное поведение псевдоэлемента

Question

Я создаю два псевдоэлемента с контейнером div. и я думаю, что контейнер имеет достаточную ширину, в то время как если вы нажмете F12, чтобы войти в режим разработки браузера, вы обнаружите, что второй псевдоэлемент находится на ниже первого. Я думал, что два псевдоэлемента должны быть в ряд. Я не могу понять это.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 55px;
  height: 55px;
  overflow: hidden;
  background-color: #ff6600;
}

.box {
  display: inline-block;
  font-size: 0
}

.box::before {
  content: '';
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('https://i.loli.net/2020/02/27/kd4tgwaMCsx7JW8.png') no-repeat center;
  background-size: contain;
}

.box::after {
  content: '';
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('https://i.loli.net/2020/02/27/Hv1jZcd6eCaDUwK.png') no-repeat center;
  background-size: contain;
}

<div class="container">
  <a class="box">

  </a>
</div>

Answer 1

Если псевдоэлементы не имеют postion: absolute и являются встроенными блоками, как в вашем случае, они (то есть оба) должны соответствовать ширине основного элемента, чтобы находиться на одной строке, в противном случае они (то есть второй) будут перенесены на следующую строку. Поэтому вам нужно сделать ваш основной элемент шире:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 110px;
  height: 55px;
  overflow: hidden;
  background-color: #ff6600;
}

.box {
  display: inline-block;
  font-size: 0
}

.box::before {
  content: '';
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('https://i.loli.net/2020/02/27/kd4tgwaMCsx7JW8.png') no-repeat center;
  background-size: contain;
}

.box::after {
  content: '';
  display: inline-block;
  width: 55px;
  height: 55px;
  background: url('https://i.loli.net/2020/02/27/Hv1jZcd6eCaDUwK.png') no-repeat center;
  background-size: contain;
}

<div class="container">
  <a class="box">

  </a>
</div>

Answer 2

Ваш контейнер имеет ширину: 55 пикселей. Измените это так:

.container{
  width: 110px;
  height: 55px;
  overflow: hidden;
  background-color: #ff6600;
}