Skip to content

Instantly share code, notes, and snippets.

@elfacht

elfacht/format-list.css

Created January 5, 2022 11:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save elfacht/e74e13e10a496ec2364a36290b1c29f3 to your computer and use it in GitHub Desktop.
Save elfacht/e74e13e10a496ec2364a36290b1c29f3 to your computer and use it in GitHub Desktop.
Download ZIP
Format list inline with more than X items
Raw
format-list.css
/* @source https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/ */
/* 5 or more items display next to each other */
li:first-child:nth-last-child(n + 5),
li:first-child:nth-last-child(n + 5) ~ li {
display: inline;
}
/* Adds semicolon after each item except the last item */
li:first-child:nth-last-child(n + 5) ~ li::before {
content: ';';
margin: 0 0.5em 0 -0.75em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment