Creating a Timeline with CSS by Combining CSS Pseudo Selectors

Tonight, I discovered that I can combine CSS pseudo selectors. I’m creating a timeline theme for personal use in WordPress that displays each blog post as part of a timeline. The end result will look like this:

 Timeline with CSS

First, I broke down all the pieces so I could figure out how I needed to build it.

  1. Center line that connects all of the posts
  2. Line to connect each post to the center line
  3. Circle that shows the intersection of the lines

Float Half of the Posts

I set all my posts to be on the left side of the page at 40% wide. Then I used :nth-child(even) to float every-other one to the right side of the page.


.post
    position: relative
    width: 40% 
    margin: 1em 0 
    padding: 0.5em 2% 
    border-radius: $rounded 
    border: $thickBorder //3px solid $color3
    background-color: $color5 
.post:nth-child(even)
    float: right

Center Line that Connects All of the Posts

To do this, I simply added the line to my #mainContent div by using the :after pseudo selector and centered the line on the page. (I’m using SASS.)


#mainContent:after
    position: absolute 
    top: 0
    content: " " 
    width: 3px 
    height: 100% 
    background-color: $color3 
    margin-left: 50% 

Line to Connect Each Post to the Center Line

For each post, I used :before.

 
.post:before 
    content: " " 
    position: absolute 
    top: 15px 
    right: -13% 
    width: 13% 
    height: 3px 
    background-color: $color3 

Circles that Show the Intersections of the Lines

To create the circle for each post, I used :after.

 
.post:after 
    content: " " 
    position: absolute 
    top: 4px 
    right: -15.6% 
    width: 15px 
    height: 15px 
    background-color: $color5
    border: $circleBorder //5px solid $color3 
    border-radius: 15px //necessary to create the circle shape 
    z-index: 10 //makes sure the circles stay on top of the lines 

Change the Direction of the Lines for the Even Posts

To do this, I changed only the even .post:after and .post:before by writing .post:nth-child(even):before. The percentages are slightly different because I adjusted them to make sure they met at the center of the vertical line.

 
.post:nth-child(even):before 
    left: -13% 
.post:nth-child(even):after 
    left: -15% 

Simple as that! I haven’t done significant browser testing with these yet, but you can always use jQuery or a jQuery plugin if you run into problems.

Helpful resources:

Comments

  1. BIlly says:

    Thanks for the post I really appreciate it it was very useful

  2. Will L says:

    I put this together on fiddler for anyone else to see working:

    http://jsfiddle.net/uTHjf/4/

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>