I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this “floating section headers” example, reminding me yet again how satisfying definition lists can be.
With nice simple HTML like this:
- Burkina Faso
- Cabo Verde
- Central African Republic
- Congo, Democratic Republic of the
- Congo, Republic of the
- Cote d’Ivoire
- Equatorial Guinea
- Eswatini (formerly Swaziland)
The default browser styling — no CSS at all — looks like this:
So, each of those
I love the simplicity of that.
And now that the core “functionality” works, the rest of the styling is just aesthetic sugar:
CodePen Embed Fallback
The version on 30 seconds of code uses a CSS Grid layout for the list items, which admittedly is more robust. I just thought it was interesting how close you can get in so little CSS without it. They also have a version where the