css 问题为什么 flex 会影响 before 的显示效果?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

? http://caniuse.com/

Less

? http://lesscss.org

Cool Libraries

? Bootstrap from Twitter

? Jetstrap

这是一个创建于 495 天前的主题，其中的信息可能已经有所发展或是发生改变。

（腾讯云最新优惠活动来了：云产品限时1折，云服务器低至88元/年，点击这里立即抢购：9i0i.cn/qcloud，更有2860元代金券免费领取，付款直接抵现金用，点击这里立即领取：9i0i.cn/qcloudquan）

（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）

这个是我的代码, 如果.square 移除 flex 特性, before 就看不见了, 为什么会这样? 我查了 mdn 没找到相关的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .square {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
/* 如果去掉这个 flex before 就看不见了 */
            display: flex;
        }
        .square::before {
            content: "";
            width: 50px;
            height: 50px;
            background: lightgreen;
        }
        .square::after {
            content: "";
        }

        .text::before{
            content: "t1";
            color: red;
        }
        .text::after{
            content: "t2";
            color: red;
        }

    </style>

</head>
<body>
    <div class="square"></div>
    <p class="text">love</p>
</body>
</html>

2 条回复 ? 2022-12-26 19:22:40 +08:00

renmu

2022-12-26 19:16:41 +08:00 via Android

.square::before{
display:inline-block
}

行内文本你不能设置宽高，又没内容，就不显示了。
你加了 flex 后，子元素就都被 flex 化了，用得就是另一套东西了

liyang5945

2022-12-26 19:22:40 +08:00 via Android

伪元素默认 display 是 inline