Css mark position in a div

Question

I have created a two divs to make a progress bar. I would like to mark on the outter div partial positions (0, 25%, 50%, 75% and 100%). The mark will be a little arrow pointing up (the image is a gif).

Here's the code html so far

<div style='height: 2px; width: 100%; border: solid 1px #000'>

    <div style='height: 2px; width: 30%; background-color: red; border-right: solid 1px #000;'></div>

</div>

This is what I see

The final html should make something like this (I circle the partial % I want)

Answer 1

TRY THIS:

JSFiddle - DEMO

div:before {
    content:"^";
    position: absolute;
    left: 0px;
}
div:after {
    content:"^";
    position: absolute;
    left: 25%;
}
div > div:before {
    content:"^";
    position: absolute;
    left: 50%;
}
div > div:after {
    content:"^";
    position: absolute;
    left: 75%;
}
span:after {
    content:"^";
    position: absolute;
    right: 0px;
}

<div style='position: relative; height: 2px; width: 100%; border: solid 1px #000'>
    <div style='height: 2px; width: 30%; background-color: red; border-right: solid 1px #000;'>
        <span></span>
    </div>
</div>