为什么我的 ::before 元素仅在我使用绝对位置时才显示？ [复制]

Question

我有一个简单的问题，我似乎找不到答案，可能是我没有在 Google 中输入正确的搜索字词，而是在试图获得更好的理解时挠了挠头对此，我仍然空手而归。

我有一个span 元素，它有一个::before 伪元素，没什么特别的，只是一个简单的圆圈。但是，我注意到我必须绝对定位伪元素才能使其可见。我发现这很奇怪，并且不确定我是否只是不完全理解这种性质的伪元素，或者我是否错误地实现了这个想法。

不管怎样，这里有一个有和没有绝对定位的例子。

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
}

.no-absolute::before,
.absolute::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

.absolute {
  position: relative;
}

.absolute::before {
  position: absolute;
  top: 4px;
  left: -15px;
}

<span class="no-absolute">No Absolute</span>
<span class="absolute">Absolute</span>

为什么我的::before 伪元素必须绝对定位才能可见？

Answer 1

答案是：您需要display 来给出伪元素的大小/形状（block 或inline-block）。 inline 元素不接受宽度/高度。

您也可以使用padding 来赋予它大小/形状，但display 和width / height 最有意义。

span {
  margin-bottom: 15px;
  position: relative;
}

.no-absolute::before,
.absolute::before {
display: block;
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

<span class="absolute">Absolute</span>

Answer 2

您的pseudo 元素需要一个显示属性。我添加了display: block。

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
  position: relative;
}

.no-absolute::before,
.absolute::before {
  content: '';
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
  display: block;
}

.absolute {
  position: relative;
}

.absolute::before {
  position: absolute;
  top: 4px;
  left: -15px;
}

<span class="no-absolute">No Absolute</span>
<span class="absolute">Absolute</span>

Answer 3

您不需要绝对定位。您只需要设置 ::before 伪元素的显示属性

html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

span {
  margin-bottom: 15px;
}

.no-absolute::before{
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  border-radius: 50%;
  background-color: #f33;
  cursor: pointer;
}

<span class="no-absolute">No Absolute</span