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

V2EX = way to explore

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

For Existing Member Sign In

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

This topic created in 1224 days ago, the information mentioned may be changed or developed.

这个是我的代码, 如果.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 replies • 2022-12-26 19:22:40 +08:00

renmu

Dec 26, 2022 via Android

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

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

liyang5945

Dec 26, 2022 via Android

伪元素默认 display 是 inline