是否有：下面或：CSS中的伪类类似于：before和：after？

Question

就像:before和:after CSS伪类一样，我们是否有任何:below和:above伪类来模拟各自的效果？

Answer 1

不，这是所有pseudo-classes的列表。 :before和:after伪类创建pseudo elements作为目标元素的子元素。父/子是DOM中唯一的物理位置概念，视觉位置是造型的问题。

这意味着，如果您希望这些元素在视觉上在其父级之上/之后，您必须使用CSS自己定位它们。

.a {
  margin-top: 20px;
}

.a::before,
.a::after {
  display: block;     /* they are inline by default */
}

.a::before { 
  content: "above";
  color: blue;
  top: -1em;  /* go above */
}

.a::after { 
  content: "bellow";
  color: red;
  top: 1em; /* go bellow */
}

<div class="a">target</div>