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