Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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