Responsive square <div> with CSS only

square.html

<div class="square">
  <div class="square-content">
    Hello world!
  </div>
</div>

style.css

.square {
	position: relative;
}
.square:before {
	content: "";
	display: block;
	padding-top: 100%;
}
.square-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}