Question

I am trying to connect the pin elements and the timeline element with horizontal white lines. Does anyone know how to do this using javascript and css? See reference links below.

Thanks in advance.

• Mike

http://mikedemar.com/devresources/timeline/example.png

http://mikedemar.com/devresources/timeline/index.html

Answer 1

Put the markers in a container with overflow: hidden, and use a pseudo-element to draw the lines:

HTML:

<ul>
    <li class="handleicon"></li>
    <li class="handleicon"></li>
    <li class="handleicon"></li>
</ul>

CSS:

ul {
    position: relative;
    overflow: hidden;
    height: 260px;
}

.handleicon {
    position: absolute;
    width: 33px;
    height: 50px;
    background: url(images/handlered.png);
}
.handleicon:before {
    content: '';
    width: 1px;
    height: 400px;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 50%;
}

Here’s the fiddle: http://jsfiddle.net/AAPSg/