Mit größerer Kreis Hintergrundfarbe in Spalten

Question

Ich habe einen Text in einer Webseite in einem Kreis zu machen, weiß ich diesen Trog CSS getan werden kann, und dies ist mein Code

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

Aber das Problem ist, wenn ich versuche, den Kreis größer zu machen, die anderen Spalten in der Nähe verlieren ihre Ausrichtung (zB setze ich eine Breite und Höhe von 460px) hier ein Beispiel dafür sollte sein:

Circle div | Textspalte | Textspalte

Gibt es eine Möglichkeit, die Hintergrundgröße zu vergrößern, ohne die anderen Spalten zu ändern/zu kreuzen?

Answer 1

ein Pseudoelement

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>