问题：

Question

.border:before{
    content: "";
    color:black;
    border-left:10px solid black;
    height:90%;

}
.border{
  display:flex;
}

如果我移除显示器flex我看到边框，但是，当我添加显示器flex时它会消失。基本上看边缘只有div的高度的90％。

Answer 1

问题：

原因是您没有在height上指定.border。 ::before伪元素在height中声明了%。由于.border没有特定的height，因此伪元素的height设置为0。

解决方案：

在height或伪元素上指定.border。

＆＃13;

/* Styles go here */
.border:before{
    content: "";
    color:black;
    border-left:10px solid black;
    height:90%;
    
}
.border{
  display:flex;
  height:42px;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1 class="border">Hello Plunker!</h1>
  </body>

</html>

＆＃13;

enter image description here

替代解决方案

或者，您可以将边框添加到.border本身，而不是使用伪元素。

＆＃13;

/* Styles go here */
.border{
  display:flex;
  border-left:10px solid black;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1 class="border">Hello Plunker!</h1>
  </body>

</html>

＆＃13;

enter image description here

为什么我在使用flexbox时没有看到：before border

1 个答案:

问题：

解决方案：

替代解决方案