如何在圆圈上方添加文字？

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

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #FCCD04;
}

<div class="circle">
  <span class="text">文字内容</span>
</div>

.text {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  font-weight: bold;
  color: #000000;
}