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

您的容器的宽度为55px。像这样更改它：

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

Answer 2

如果伪元素没有<button id="submitButtonId">hello</button> ... focusToSetReminder(){ this.$nextTick(() => { $('#submitButtonId').focus() }); },且是内联块，就像您的情况一样，它们（即它们两个）都需要适合主元素的宽度以保持相同行，否则它们（即第二行）将换行到下一行。因此，您需要扩大主要元素：

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;
}

CSS伪元素怪异行为

2 个答案: