always keep pseudo element horizontally in the middle - html

Question

How do I always keep a pseudo element horizontally in the middle? I have it positioned absolutely with a percentage value, which I undrstood was relative to the width of the element but on different screen sizes the circular "OR" is not consistently in the middle...
See below:
.content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px;
}
.cc-content {
width: 50%;
padding: 5px 20px;
position: relative;
background-color: red;
}
.cc-content-1 {
margin-right: 3px;
}
.cc-content-2 {
margin-left: 3px;
}
.cc-content-1:after {
content: 'OR';
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 60px;
top: 20px;
left: 90%;
z-index: 1;
font-size: 21px;
font-weight: bold;
border-radius: 100%;
width: 60px;
height: 60px;
background-color: #F2F2F2;
color: #006AAD;
}
<div class="content">
<div class="cc-content cc-content-1">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
<div class="cc-content cc-content-2">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
</div>
If you resize the window you can see the circle shifts ever so slightly off cente, how do I always keep it in center with position absolute? Is not not percentage? I tried playing with flex since it is in a flex container but that doesn't seem to do anything.
How do I horizontally center a position absolute :after element?

Answer 1

Very similar to #mgrsskls but using actual :after element. Its an old trick to use absolute, then add left and negative margin equal to half-width. But in your case there is additional margin which needs to be thought of as well.
.content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px;
}
.cc-content {
width: 50%;
padding: 5px 20px;
position: relative;
background-color: red;
}
.cc-content-1 {
margin-right: 3px;
}
.cc-content-2 {
margin-left: 3px;
}
.cc-content-1:after {
content: 'OR';
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 60px;
top: 20px;
left: 100%;
margin-left: -27px;
z-index: 1;
font-size: 21px;
font-weight: bold;
border-radius: 100%;
width: 60px;
height: 60px;
background-color: #F2F2F2;
color: #006AAD;
}
<div class="content">
<div class="cc-content cc-content-1">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
<div class="cc-content cc-content-2">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
</div>

Answer 2

First of all I would put the "or" in the HTML, so screen readers would read it out loud correctly. Then you can position that element relative to the whole container, with percentage yes. You move it exactly to the middle with left: 50% and then by its half width back to the left with transform: translateX(-50%) (that way you don't have to know how wide the "or" element is).
.content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
text-align: center;
margin: 20px;
position: relative;
}
.cc-content {
width: 50%;
padding: 5px 20px;
position: relative;
background-color: red;
}
.cc-content-1 {
margin-right: 3px;
}
.cc-content-2 {
margin-left: 3px;
}
.or {
display: inline-block;
position: absolute;
vertical-align: middle;
line-height: 60px;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
font-size: 21px;
font-weight: bold;
border-radius: 100%;
width: 60px;
height: 60px;
background-color: #F2F2F2;
color: #006AAD;
text-transform: uppercase;
}
<div class="content">
<div class="cc-content cc-content-1">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
<div class="or">or</div>
<div class="cc-content cc-content-2">
<h3>Header Here</h3>
<p>Lorem Ipsuom gshjgshj gshjgsajhusgs gsaiyusgisysgsyigs</p>
</div>
</div>

Answer 3

Instead of left: 90%, you can do left: calc(100% - 30px).
30px is half the width of the pseudo-element.