以下代码片段中的:: before伪元素是做什么的？

Question

以下代码适用于响应式灵活圈示例，但我不明白.circle:before究竟在做什么以及它在这方面有何帮助？我认为::before类会在元素前面应用一些东西。

.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>