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.

    position: relative
    width: 40% 
    margin: 1em 0 
    padding: 0.5em 2% 
    border-radius: $rounded 
    border: $thickBorder //3px solid $color3
    background-color: $color5 
    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.)

    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.

    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.

    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.

    left: -13% 
    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:

The Ternary Operator: Shorthand for if/else

I ran into this when going through a slideshow tutorial from Six Revisions, so I thought I would find out what it was and how it worked.

Here’s the snippet from that slideshow tutorial that contains the ternary operator:

currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;//Determine new position

What It Is

A ternary operator is basically shorthand for if/else. Wayne Koorts explains it simply. It “should produce a boolean result when evaluated: either true or false.” He gives this example:

<variable> = <expression> ? <true clause> : <false clause>

So in the slideshow example, it determines currentPosition. If rightControl is true, it sets currentPosition+1. If false, it sets it at currentPosition-1. Simple as that.


I could write an if/else statement like this:

var a = 8;
var b = determineA();

function determineA(){
  if (a <=11){
    return "blue";
  } else {
    return "green";

console.log(b);//returns "blue"

Or, I could simplify that by using a ternary operator like this:

var a = 8;
var b = (a <= 11) ? "blue" : "green";
console.log(b);//returns "blue"