Make vertical splitters in pure css3 in background - html

Question

I am trying to make a vertical splitter in background of a home-made slider (like here http://theymakeapps.com/users/add). How to do that ?
Here is what I've done so far:
<div id="wrapper">
<div id="dragger">
<div class="rect"></div>
<div class="arrow-down"></div>
</div>
<div id="slide-container"></div>
</div>
<br />
<span class="drag-caption active" id="hi-caption">Hi, bot</span> <span class="drag-caption" id="keep-caption">Keep sliding...</span> <span class="drag-caption" id="submit-caption">Submit</span>
And my css
* {
font-family: calibri
}
#dragger {
width: 10px;
padding: 5px 10px 5px 5px;
}
.rect {
background-color: #ccc;
height: 15px;
width: 10px;
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #ccc;
}
#wrapper {
z-index: 55;
width: 200px;
padding: 0 10px;
}
#slide-container {
background: #dedede;
height:2px;
border-radius: 1px;
margin-top:-18px;
}
.drag-caption {
padding-right: 20px;
color: #d4d4d4;
-webkit-transition: color 500ms ease;
-moz-transition: color 500ms ease;
-ms-transition: color 500ms ease;
-o-transition: color 500ms ease;
transition: color 500ms ease;
}
.drag-caption.active {
color: black;
}
#submit-caption{
font-weight: bold;
}
And here is the jsfiddle. I'd like my separtors to be aligned over the caption and ON the background bar.
Like this:
---|---------|------------|
| | |
Hi bot Keep sliding Submit

Answer 1

I've added a div and two span elements and positioned the separators on the range using CSS Positioning.
Demo
Demo 2 (If you don't need the last one)
Demo 3 (As per your exact requirements)
Here, am using CSS Positioning to position each of the separator on the range bar, you can tweak up the lefts and rights according to your requirement.
<div id="slide-container"></div>
<div class="separators"><span></span><span></span></div> <!-- Add this after #slide-container -->
.separators {
position: relative;
}
.separators > span:before,
.separators > span:after{
content: "|";
position: absolute;
z-index: -1;
color: #DEDEDE;
}
.separators > span:nth-of-type(1):before {
left: 50px;
top: -12px;
}
.separators > span:nth-of-type(1):after {
left: 100px;
top: -12px;
}
.separators > span:nth-of-type(2):before {
left: 150px;
top: -12px;
}
.separators > span:nth-of-type(2):after {
left: 200px;
top: -12px;
}