CSS: how to set intervals inside a progress bar? - html

Question

I created a progress bar in CSS, with 4 goals: (0, 1.000, 10.000 and 100.000).
The goal amounts are displayed outside the progress bar, but inside the progress bar I would like to create 2 intervals exactly below the second and the third goal (first goal and last goal are the beginning and the end of the bar).
The interval should be like a line from the top to the bottom of the bar, visible also if the progress bar passes over them (for this I set a transparence on the progress bar's color).
Which is the best way to do it?
.progress-goals {
max-width: 66%;
margin: 0 auto 0;
display: flex;
justify-content: space-between;
}
.progress-goals h3 {
display: inline-block;
}
.progress-goals:last-child {
flex: 1;
}
.progress-bg {
margin: 0px auto 0px;
max-width: 66%;
height: 78px;
border-radius: 5px;
text-align: center;
-moz-box-shadow: inset 0 0 10px #ccc;
-webkit-box-shadow: inset 0 0 10px #ccc;
box-shadow: inset 0 0 10px #ccc;
}
.progress-bar {
height: 78px;
border-radius: 5px;
float: left;
width: 45%;
/* fallback */
background:
rgba(28, 53, 120, 0.7);
}
.progress-bg h4.goal,
.progress-bg h4.raised {
font-family: Arial, sans-serif;
font-size: 2em;
font-weight: 600;
line-height: 78px;
margin: 0;
padding: 0;
text-align: center;
display: inline;
}
.progress-bg h4.raised {
display: inline;
color: #fff;
text-align: center;
}
.progress-bg h4.goal {
color: #b2b2b2;
text-align: center;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Firefox */
#-moz-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Safari and Chrome */
#-webkit-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
#-ms-keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body .progress-bg div {
-webkit-animation: progress-bar 2s ease forwards;
-moz-animation: progress-bar 2s ease forwards;
-o-animation: progress-bar 2s ease forwards;
animation: progress-bar 2s ease forwards;
}
#keyframes progress-bar {
from {
width: 0%;
}
to {
width: 45%;
}
}
<div class="progress-goals">
<h3 class="no-goal">$0</h3>
<h3 class="first-goal">$1,000</h3>
<h3 class="second-goal">$10,000</h3>
<h3 class="last-goal">$100,000</h3>
</div>
<div class="progress-bg" id="progress-bg">
<div class="first-goal-bar"></div>
<div class="second-goal-bar"></div>
<div class="progress-bar">
<h4 class="raised">$5,000 raised </h4>
</div>
</div>