flex和grid中容器的伪元素::before和::after生成的内容被视为一个子元素项目

一个以前不知道的知识点

<style>
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 100px 100px;
        grid-gap: 20px;
    }

    .flex {
        display: flex;
        justify-content: space-between;
    }

    section:before {
        content: "Before Content";
        display: block;

        background-color: #7CCBB0;
        border-radius: 5px;
        padding: 10px;
    }

    section:after {
        content: "After Content";
        display: block;
        grid-column: 2;
        grid-row: 1 / span 2;

        background-color: #7CCBB0;
        border-radius: 5px;
        padding: 10px;
    }
</style>


<h2>Grid</h2>
<section class="grid">
    <div class="item">item1</div>
    <div class="item">item2</div>
</section>

<h2>Flexbox</h2>
<section class="flex">
    <div class="item">item1</div>
    <div class="item">item2</div>
</section>

在线地址：
https://codepen.io/airen/pen/qXddOZ

参考文献：
https://www.w3cplus.com/css3/collection-interesting-facts-css-grid-layout.html