要素の高さを擬似要素を含めた高さにできるかどうか

実現したいこと

親要素の高さを、擬似要素を含めた高さにできるのかどうか知りたい

前提

div要素に擬似要素を追加したのですが、擬似要素の高さが反映されず
下の要素と重なってしまいました。

要素の高さは、擬似要素の高さは含まないのでしょうか？

以下に簡略化したコードを添付します。

該当のソースコード

html
1<div class="section-top"></div>
2<div class="section-bottom"></div>

scss
1.section-top {
2    position: relative;
3    background-color: black;
4    width: 200px;
5    height: 200px;
6
7    &::after {
8        content: "";
9        display: block;
10        width: 100%;
11        height: 150%;
12        background-color: aqua;
13        opacity: 0.5;
14    }
15}
16
17.section-bottom {
18    width: 200px;
19    height: 200px;
20    background-color: bisque;
21}

どうなって欲しいか

.section-topと.section-bottomが重ならず、縦にぴったり並ぶようにしてほしい

行動規範の内容に同意します

回答1件

ベストアンサー

section-topをラップしてはだめですか？

css
1<style>
2.wrap::after{
3  display: block;
4  clear: both;
5  content: "";
6}
7.section-top {
8  background-color: black;
9  width: 200px;
10  height: 200px;
11}
12.section-top::after {
13  content: "";
14  width: 100%;
15  height: 150%;
16  background-color: aqua;
17  opacity: 0.5;
18  float:left;
19}
20.section-bottom {
21  width: 200px;
22  height: 200px;
23  background-color: bisque;
24}
25</style>
26<div class="wrap">
27<div class="section-top"></div>
28</div>
29<div class="section-bottom"></div>

単純にやるなら.section-topにmargin-bottomを設定するだけでも

CSS
1<style>
2.section-top {
3    position: relative;
4    background-color: black;
5    width: 200px;
6    height: 200px;
7    margin-bottom:100px;
8}
9.section-top::after {
10    content: "";
11    display: block;
12    width: 100%;
13    height: 150%;
14    background-color: aqua;
15    opacity: 0.5;
16}
17
18.section-bottom {
19    width: 200px;
20    height: 200px;
21    background-color: bisque;
22}
23</style>
24<div class="section-top"></div>
25<div class="section-bottom"></div>