Gradient Element Backgrounds with Psuedo-Elements

Recently, I was playing around with some web site mockups and came up with the following idea for a simple todo list app:

I really liked the idea of using a consistent gradient that persisted across the todo list.

In order to accomplish the effect, I took use of CSS Pseudo-Elements. Behind the todo list is a simple gradient:

See the Pen Gradient Todo Background Only by Nathan Minchow (@nathanspenner) on CodePen.

Each todo item is given a transparent background, and a pseudo-element spanning the width of the element with a white background is placed after each item:

See the Pen Gradient Todo by Nathan Minchow (@nathanspenner) on CodePen.

This helps with the illusion that there’s a natural transparent gap between the items. If you were using this in an actual app, you’d probably want to use a custom property to keep the color of the pseudo-elements and the background in sync.

But that’s about it! Nothing too special – just a neat use case where pseudo-elements made a somewhat tricky sounding task fairly easy.