html - 在列中使用更大的圆圈背景颜色

Question

我必须在圆圈内的网页中制作一些文本，我知道这可以通过 CSS 完成，这是我的代码

.circle-div{
 width: 100%;
 height: 100%;
 text-align:center;
 background-color: rgba(75,113,252, 0.85);
 border-radius: 50%;
 color: white;
 padding:15%;
}

但问题是，当我尝试使圆变大时，它附近的其他列失去了对齐(例如，我将宽度和高度设置为 460 像素)，下面是一个例子:

圆div |正文栏 |正文栏

有没有办法在不改变/交叉其他列的情况下增加背景大小？

Answer 1

使用伪元素

div {
  display: inline-block;
  position: relative;
  width: 5%;
  text-align:center;
  padding:10%;
}
.circle:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(75,113,252, 0.85);
  border-radius: 50%;
}

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