What is the ::before pseudo-element in the following code snippet doing?

Asked Feb 23 '18 at 18:51

Active Feb 23 '18 at 18:58

Viewed 34 times

The code below is for a responsive flex circle example but I don't understand what the .circle:before is doing exactly and how it helped here? I thought the ::before class would apply something in front of an element.

.circle-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.circle {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background: #bada55;
  border-radius: 50%;
  margin: 5px;
}
.circle:before {
  content: "";
  display: block;
  padding-top: 100%; /* ratio of 1:1*/
}

<div class="circle-wrap">
    <div class="circle"></div>
</div>

edited Feb 23 '18 at 18:58

TylerH

20,799
66
75
101

asked Feb 23 '18 at 18:51

ajhernandez95

https://developer.mozilla.org/en-US/docs/Web/CSS/::before – Mr.7 Feb 23 '18 at 18:54
Is this your code or someone else's? – TylerH Feb 23 '18 at 19:02
Someone else's im looking at for an example i am trying to accomplish the same things with the circles. – ajhernandez95 Feb 23 '18 at 22:33

What is the ::before pseudo-element in the following code snippet doing?

0 Answers0