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

V2EX = way to explore

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

现在注册

已注册用户请登录

Can I use?

http://caniuse.com/

Less

http://lesscss.org

Cool Libraries

Bootstrap from Twitter

Jetstrap

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

这个是我的代码, 如果.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