A Pen by Yvain Liechti.

index.html

<ul class="timeline">
  <li><a href="#"><time>08/01/2015</time></a></li>
  <li><a href="#"><time>15/01/2015</time></a></li>
  <li><a href="#"><time>20/01/2015</time></a></li>
</ul>

style.scss

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: 3px solid #000;
  position: relative;
  margin: 50px auto;
}
.timeline {
  &:before,
  li {
    box-shadow: 0 0 0 2px #000;
    border-radius: 50%;
    position: absolute;
    height: 6px;
    width: 6px;
    border: 2px solid #fff;
    background: #fff;
    top: 0;
    left: 50%;
  }
  &:before {
    content:'';
    top: 0;
    left: 50%;
    margin-left:-6px;
    margin-top:-6px;
  }
  
  li{
    a {
      display: block;
      position: absolute;
      text-decoration: none;
    }

    
    &:nth-child(1) {
      top: 50%;
      left: 100%;
      margin-left:-4px;
      margin-top:-6px;
      
      a {
        text-align: left;
        top: -5px;
        left: 15px;
      }
    }
    &:nth-child(2) {
      top: 100%;
      left: 50%;
      margin-left:-6px;
      margin-top:-4px;
      
      a {
        text-align: center;
        top: 15px;
        left:-50px;
        right:-50px;
      }
    }
    &:nth-child(3){
      top: 50%;
      left: 0;
      margin-left:-6px;
      margin-top:-6px;
      
      a {
        text-align: left;
        top: -5px;
        right: 15px;
      }
    }
  }
}

yKCfi.markdown

yKCfi

A Pen by Yvain Liechti on CodePen.

License.