I'm attempting to generate a circular shape using the ::after pseudo element, which adjusts its size automatically based on the content inside.
.container {
display: flex;
flex-direction: row;
}
#dividerHost2 #left {
flex: 1 1 auto;
background-color: yellowgreen;
height: 200px;
}
#dividerHost2 #right {
flex: 1 1 auto;
background-color: dodgerblue;
}
#dividerHost2 .divider {
background-color: white;
margin: 0px;
width: 6px;
font-weight: 800;
}
.divider.vertical {
--divider-color: transparent;
display: inline-flex;
width: 1px;
border-left: 1px solid rgb(var(--divider-color));
margin: 0px 2px 0px 2px;
overflow: show;
}
.divider.vertical.title::after {
flex: 0 0 auto;
align-self: center;
border-radius: 50%;
content: "OR";
padding: 9px 8px 11px 8px;
background-color: white;
color: black;
transform: translateX(-44%);
z-index: 10;
}<div id="dividerHost2" class="container">
<div id="left" class="container" style="flex-direction: row;"></div>
<div id="divider3" class="divider vertical title"></div>
<div id="right" class="container" style="flex-direction: row;"></div>
</div>This approach has yielded pleasing results thus far:
https://i.sstatic.net/SSeJu.png
Have a look at the JSFiddle here: https://jsfiddle.net/jsnbtmh3/
However, when the text length increases, the circle transforms into an oval shape:
https://i.sstatic.net/y0vns.png
Is there a way to make sure the circle dynamically adjusts its size based on the content?