you need to push your div.dot 50% to the left to make the starting point of div as a center of a checkmark.
transform: translateX(-50%)
.progress-container {
display: flex;
background: gray;
height: 20px;
width: 500px;
border-radius: 20px;
position: relative;
}
.threshold {
background: orange;
width: 30%;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
.dot {
position: absolute;
left: 30%;
margin-top: -5px;
width: 24px;
height: 24px;
text-align: center;
border: 4px solid green;
background: #f8f8f8;
border-radius: 50%;
transform: translateX(-50%);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.dot:after {
content: "✔";
color: green;
font-weight: bold;
font-size: 18px;
}
.completed {
flex: 1;
background: red;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}<div class="progress-container">
<div class="threshold">
</div>
<div class="dot">
</div>
<div class="completed">
</div>
</div>CLICK HERE to find out more related problems solutions.