css实现定宽高比(非内容撑出)

  <head>     
     <style>     
     .before {
        display: flex;
        width: 100px;
        background: #f00;
      }
      .before:before {
        content: "";
        padding-top: 100%;
      }
      </style>
  </head>
  <body>
    <div class="before">before</div>
  </body>

注：需要实现定宽高比的元素的内容不能超出宽高比计算出来的高度