A Pen by jalal (Tim Pushman).

CSS-Timeline-Vertical.markdown

CSS Timeline Vertical

Turning an ordered list into a vertical timeline using CSS.

A Pen by jalal (Tim Pushman) on CodePen.

License.

index.html

<ol>
  <li>
    Starting Point
    <span class="details">
      Description of point 1
    </span>
  </li>
  <li style="margin-top: 80px">
    Point 2
    <span class="details">
      Description of point 2, with much more
      text than would be normal.
    </span>
  </li>
  <li style="margin-top: 20px">
    Point 3
    <span class="details">
      Description of point 3
    </span>
  </li>
  <li style="margin-top: 50px">
    This is the fourth point.
    <span class="details">
      Description of point 4
    </span>
  </li>
</ol>

style.scss

@import "compass";
$pen-color: #9b2;
$line-color: $pen-color;
$hover-color: #28e;

html, body {
  color: $pen-color;
	  background: #eee;
	  min-width: 300px;
}

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

ol {
	position: relative;
margin: 100px;
	  width: 4px;
max-width: 4px;
  height: 400px;
	background: transparent;
  border-left: 4px solid $line-color;
}
ol::after {
	content: "";
	position: absolute;
	left: -12px;
	display: block;
	width: 0;
	height: 0;
  border-radius: 10px;
	border: 10px solid $line-color;
}
ol::after { /* bottom arrow */
	right: -10px;
top: 400px;
	border: 10px solid transparent;
	border-bottom: 0;
	border-top: 20px solid $line-color;
  border-radius: 3px;
}

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

li {
position: relative;
	top: 0px;
	display: block;
width: 150px;
font: bold 14px arial;
  left: -30px;
}
li::before {
	content: "";
	position: absolute;
		left: -19px;
display: block;
	width: 6px;
	height: 6px;
	border: 4px solid $line-color;
	border-radius: 10px;
	background: #eee;
}

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

.details {
	display: none;
	position: absolute;
  width: 300px;
	left: 120px;
	top: -10px;
	padding: 15px;
	border-radius: 3px;
	border-right: 2px solid rgba(0,0,0,.1);
	border-bottom: 2px solid rgba(0,0,0,.1);
  border-left: 4px solid $line-color;
font: 12px arial;
	background: #fff;
}
.details::before {
	content: "";
	position: absolute;
	left: -19px;
	top: 15px;
	display: block;
	width: 1px;
	height: 1px;
	border: 5px solid transparent;
	border-right-color: $line-color;
  border-right-width: 15px;
border-left: 0;
}
/* ---- Hover effects ---- */

li:hover {
	cursor: pointer;
  color: $hover-color;
}
li:hover::before {
	left: -20px;
	width: 8px;
	height: 8px;
	border-width: 5px;
	border-color: $hover-color;
}
li:hover .details {
	display: block;
  color: #444;
}