Timeline Horizontal Sample

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!

  1. Point 1
    Description of point 1
  2. Point 2
    Description of point 2
  3. Point 3
    Description of point 3

Code:
html, body {
color: #681;
background: #eee;
min-width: 700px;
}

/* ---- Timeline ---- */

ol {
position: relative;
display: block;
margin: 100px;
height: 4px;
background: #9b2;
}
ol::before,
ol::after {
content: \"\";
position: absolute;
top: -8px;
display: block;
width: 0;
height: 0;
border-radius: 10px;
border: 10px solid #9b2;
}
ol::before {
left: -5px;
}
ol::after {
right: -10px;
border: 10px solid transparent;
border-right: 0;
border-left: 20px solid #9b2;
border-radius: 3px;
}

/* ---- Timeline elements ---- */

li {
position: relative;
top: -75px;
margin-left: 50px;
display: inline;
float: left;
width: 150px;
transform: rotate(-45deg);
font: bold 14px arial;
}
li::before {
content: \"\";
position: absolute;
top: 3px;
left: -29px;
display: block;
width: 6px;
height: 6px;
border: 4px solid #9b2;
border-radius: 10px;
background: #eee;
}

/* ---- Details ---- */

.details {
display: none;

position: absolute;
left: -85px;
top: 60px;
padding: 15px;
border-radius: 3px;
border-right: 2px solid rgba(0,0,0,.1);
border-bottom: 2px solid rgba(0,0,0,.1);
transform: rotate(45deg);
font: 12px arial;
background: #fff;
}
.details::before {
content: \"\";
position: absolute;
left: 10px;
top: -9px;
display: block;
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: #fff;
border-top: 0;
}

/* ---- Hover effects ---- */

li:hover {
cursor: pointer;
color: #28e;
}
li:hover::before {
top: 1px;
left: -31px;
width: 8px;
height: 8px;
border-width: 5px;
border-color: #28e;
}
li:hover .details {
display: block;
color: #444;
}
}