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

最新推荐文章于 2023-10-12 09:49:27 发布

大拿加拿大

最新推荐文章于 2023-10-12 09:49:27 发布

阅读量2k

点赞数

文章标签： flex grid before after

本文链接：https://blog.csdn.net/zgrbsbf/article/details/90444834

版权

一个以前不知道的知识点

<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>

在这里插入图片描述