CODEWITHSUNDEEP
cssflexbox
Jackie
Jackie

Reputation: 23597

Why do I not see a :before border when using flexboxes

I have the following CSS...

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

}
.border{
  display:flex;
}

If I remove the display flex I see the border, however, when I add the display flex it disappears. Basically looking to have a side border that is only 90% the height of the div.

Upvotes: 0

Views: 49

Answers (1)

Kelderic
Kelderic

Reputation: 6717

Problem:

The reason is that you don't have a height specified on .border. The ::before pseudo-element has a height declared in %. Since .border doesn't have a specific height, then the height of the pseudo-element is set to 0.

Solution:

Specify a height on .border, or on the pseudo-element.

/* Styles go here */
.border:before{
    content: "";
    color:black;
    border-left:10px solid black;
    height:90%;
    
}
.border{
  display:flex;
  height:42px;
}
<!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>

enter image description here

Alternative Solution

Alternatively, you could just add the border to .border itself and not use a pseudo-element.

/* Styles go here */
.border{
  display:flex;
  border-left:10px solid black;
}
<!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>

enter image description here

Upvotes: 2

Related Questions