CSS: How can I always output an element square?

For example, to make a box responsive square, the following CSS adjustments are necessary.

.square {
  position: relative;
  width: 50%;

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;

.content {
  position: absolute;
  width: 100%;
  height: 100%;
Without cookies
This website does not use cookies or tracking. More information can be found in the privacy policy.