Skip to content

Instantly share code, notes, and snippets.

@ziadoz

ziadoz/commas.html

Last active December 20, 2023 20:47
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 ziadoz/49a63232702e00d00fce2fa1a86821d4 to your computer and use it in GitHub Desktop.
Save ziadoz/49a63232702e00d00fce2fa1a86821d4 to your computer and use it in GitHub Desktop.
Download ZIP
HTML/CSS - Human List, Commas, Oxford Commas
Raw
commas.html
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--commas-separator: ", ";
--commas-last-separator: " & ";
}
ul.commas,
ul.oxford-commas {
& {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0;
padding: 0;
}
li:after {
content: var(--commas-separator);
}
li:nth-last-child(2):after {
content: var(--commas-last-separator);
}
li:last-child:after {
content: ""
}
}
ul.oxford-commas {
li:nth-last-child(2):after {
content: var(--commas-separator) var(--commas-last-separator);
}
}
</style>
</head>
<body>
<ul class="commas">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
<ul class="commas">
<li>Apples</li>
<li>Bananas</li>
</ul>
<ul class="commas">
<li>Apples</li>
</ul>
<ul class="oxford-commas">
<li>Apples</li>
<li>Bananas</li>
<li>Oranges</li>
<li>Pears</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment