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:
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:
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.