Skip to content

Instantly share code, notes, and snippets.

@ziadoz
Created April 7, 2022 10:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ziadoz/90e5747ac601126da868504b44901fc8 to your computer and use it in GitHub Desktop.
CSS Only Human Readable List
<style>
ul.human-list {
list-style: none;
}
ul.human-list li {
display: inline-block;
}
ul.human-list li:not(:last-child):after {
content: ", "
}
ul.human-list li:last-child:before {
content: "& "
}
ul.human-list li:first-child:before {
content: "";
}
</style>
<ul>
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
<ul><li>Apples</li></ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment