I want to make "grammatically correct" lists using CSS. This is what I have so far:
The <li> tags are displayed horizontally with commas after them.
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
That works, but I want the "last-child" to have a period instead of a comma. And, if possible, I'd like to put "and" before the "last-child" as well. The lists I'm styling are generated dynamically, so I can't just give the "last-children" a class. You can't combine pseudo-elements, but that's basically the effect I want to achieve.
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
How do I make this work?
This question is related to
css
This works :) (I hope multi-browser, Firefox likes it)
li { display: inline; list-style-type: none; }_x000D_
li:after { content: ", "; }_x000D_
li:last-child:before { content: "and "; }_x000D_
li:last-child:after { content: "."; }<html>_x000D_
<body>_x000D_
<ul>_x000D_
<li>One</li>_x000D_
<li>Two</li>_x000D_
<li>Three</li>_x000D_
</ul>_x000D_
</body>_x000D_
</html>Adding another answer to this question because I needed precisely what @derek was asking for and I'd already gotten a bit further before seeing the answers here. Specifically, I needed CSS that could also account for the case with exactly two list items, where the comma is NOT desired. As an example, some authorship bylines I wanted to produce would look like the following:
One author:
By Adam Smith.
Two authors:
By Adam Smith and Jane Doe.
Three authors:
By Adam Smith, Jane Doe, and Frank Underwood.
The solutions already given here work for one author and for 3 or more authors, but neglect to account for the two author case—where the "Oxford Comma" style (also known as "Harvard Comma" style in some parts) doesn't apply - ie, there should be no comma before the conjunction.
After an afternoon of tinkering, I had come up with the following:
<html>
<head>
<style type="text/css">
.byline-list {
list-style: none;
padding: 0;
margin: 0;
}
.byline-list > li {
display: inline;
padding: 0;
margin: 0;
}
.byline-list > li::before {
content: ", ";
}
.byline-list > li:last-child::before {
content: ", and ";
}
.byline-list > li:first-child + li:last-child::before {
content: " and ";
}
.byline-list > li:first-child::before {
content: "By ";
}
.byline-list > li:last-child::after {
content: ".";
}
</style>
</head>
<body>
<ul class="byline-list">
<li>Adam Smith</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li>
</ul>
<ul class="byline-list">
<li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
</ul>
</body>
</html>
It displays the bylines as I've got them above.
In the end, I also had to get rid of any whitespace between li elements, in order to get around an annoyance: the inline-block property would otherwise leave a space before each comma. There's probably an alternative decent hack for it but that isn't the subject of this question so I'll leave that for someone else to answer.
Fiddle here: http://jsfiddle.net/5REP2/
I do like this for list items in <menu> elements. Consider the following markup:
<menu>
<li><a href="/member/profile">Profile</a></li>
<li><a href="/member/options">Options</a></li>
<li><a href="/member/logout">Logout</a></li>
</menu>
I style it with the following CSS:
menu > li {
display: inline;
}
menu > li::after {
content: ' | ';
}
menu > li:last-child::after {
content: '';
}
This will display:
Profile | Options | Logout
And this is possible because of what Martin Atkins explained on his comment
Note that in CSS 2 you would use :after, not ::after. If you use CSS 3, use ::after (two semi-columns) because ::after is a pseudo-element (a single semi-column is for pseudo-classes).
You can combine pseudo-elements! Sorry guys, I figured this one out myself shortly after posting the question. Maybe it's less commonly used because of compatibility issues.
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
This works swimmingly. CSS is kind of amazing.
To have something like One, two and three you should add one more css style
li:nth-last-child(2):after {
content: ' ';
}
This would remove the comma from the second last element.
Complete Code
li {_x000D_
display: inline;_x000D_
list-style-type: none;_x000D_
}_x000D_
_x000D_
li:after {_x000D_
content: ", ";_x000D_
}_x000D_
_x000D_
li:nth-last-child(2):after {_x000D_
content: '';_x000D_
}_x000D_
_x000D_
li:last-child:before {_x000D_
content: " and ";_x000D_
}_x000D_
_x000D_
li:last-child:after {_x000D_
content: ".";_x000D_
}<html>_x000D_
_x000D_
<body>_x000D_
<ul>_x000D_
<li>One</li>_x000D_
<li>Two</li>_x000D_
<li>Three</li>_x000D_
</ul>_x000D_
</body>_x000D_
_x000D_
</html>I am using the same technique in a media query which effectively turns a bullet list into an inline list on smaller devices as they save space.
So the change from:
to:
List Item 1; List Item 2; List Item 3.
Just To mention, in CSS 3
:after
should be used like this
::after
From https://developer.mozilla.org/de/docs/Web/CSS/::after :
The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.
So it should be:
li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }
An old thread, nonetheless someone may benefit from this:
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }
This should work in CSS3 and [untested] CSS2.
Source: Stackoverflow.com