CSS中是否有类似于:before和:after的:below或:above伪类？

Question

类似于 :before 和 :after CSS 伪类，我们是否有任何 :below 和 :above 伪类来模拟相应的效果？

- sherlock

---

通过上面/下面，你是指呈现在顶部/底部吗？还是指HTML层次结构中的父级/子级？ - skyline3000

@skyline3000 我指的是物理位置 - sherlock

Answer 1

不，这里是所有 伪类 的列表。:before 和 :after 伪类将 伪元素 创建为目标元素的子元素。在 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>

- nem035

---

就像你对.a应用了relative定位，对其伪元素应用了absolute定位一样，我无法将我的顶级/父元素设置为relative。你有什么办法解决这个问题吗？ - sherlock

我们实际上不需要这个，我的错。我们可以将它们显示为“块”。 - nem035