How to maintain a circlur shape of element with dynamic content?
Here is a trick using radial-gradient. The idea is to keep the element full height and color it using circle closest-side
which will always create a circle that will start from the center and expand to the closest sides (left and right one)
I simplified the code to keep only the relevant part:
.container {
display: flex;
flex-direction: row;
margin:10px;
}
.left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
.right {
flex: 1 1 auto;
background-color: dodgerblue;
}
.divider {
background-color: white;
width: 6px;
font-weight: 800;
display: flex;
justify-content: center;
}
.divider::after {
display: flex;
align-items: center;
flex: 0 0 auto;
content: attr(data-text);
padding: 0 8px;
background: radial-gradient(circle closest-side, white 98%, transparent 100%);
z-index: 10;
}
<div class="container">
<div class="left "></div>
<div class="divider" data-text="OR"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="longer"></div>
<div class="right "></div>
</div>
<div class="container">
<div class="left "></div>
<div class="divider" data-text="even longer"></div>
<div class="right "></div>
</div>
Don't put actual content in the pseudo-element especially as this is actually "content" rather than styling, rather use the pseudo-element to create a background circle using the padding/aspect ratio trick.
body {
text-align: center;
}
.divider {
margin: 3em;
display: inline-block;
position: relative;
padding: 1em;
font-weight: bold;
}
.divider:after {
content: "";
position: absolute;
width: 100%;
padding-top: 100%;
background: lightblue;
border-radius: 50%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
<div class="divider">OR</div>
<div class="divider">LONG TEXT</div>