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:
First, I broke down all the pieces so I could figure out how I needed to build it.
- Center line that connects all of the posts
- Line to connect each post to the center line
- 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
.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
.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: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.