CSSの前後に類似した疑似クラスがありますか？

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>