I wanted to share this little bit of code, because I think it’s awesome.

I made some changes to the post navigation (the previous and next links below each post) here on eichefam.net. It’s common enough in blogs to have an arrow and the post title, but I wanted to do something more. So I built a little extra markup and styled each arrow to use the post’s featured image (if it has one), shown behind the arrow. Add a little position: absolute and pseudo element trickery and away we go.

See the Pen Navigation button with background by Paul (@peiche) on CodePen.0


Disclaimer: I’ve simplified some of the markup and styles because I just wanted to show the relevant bits.