J'ajoute une autre réponse à cette question car j'avais précisément besoin de ce que @derek demandait et j'étais déjà allé un peu plus loin avant de voir les réponses ici. Plus précisément, j'avais besoin d'un CSS qui pouvait également tenir compte du cas où il y a exactement deux éléments de liste, où la virgule n'est PAS souhaitée. À titre d'exemple, les légendes de paternité que je souhaite produire ressembleraient à ce qui suit :
Un auteur : By Adam Smith.
Deux auteurs : By Adam Smith and Jane Doe.
Trois auteurs : By Adam Smith, Jane Doe, and Frank Underwood.
Les solutions déjà données ici fonctionnent pour un auteur et pour 3 auteurs ou plus, mais négligent de prendre en compte le cas de deux auteurs - où le style "virgule d'Oxford" (également connu sous le nom de "virgule de Harvard" dans certaines régions) ne s'applique pas - c'est-à-dire qu'il ne doit pas y avoir de virgule avant la conjonction.
Après un après-midi de bricolage, j'ai trouvé la solution suivante :
<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>
Il affiche les légendes comme je les ai mises ci-dessus.
À la fin, j'ai aussi dû me débarrasser de tout espace blanc entre li afin de contourner un inconvénient : la propriété inline-block laisserait sinon un espace avant chaque virgule. Il existe probablement une autre solution décente, mais comme ce n'est pas le sujet de cette question, je laisse à quelqu'un d'autre le soin d'y répondre.
Fiddle ici : http://jsfiddle.net/5REP2/
4 votes
Vous ne devriez vraiment pas utiliser de css pour ça.
2 votes
Je dois être un peu d'accord avec Funky Dude. Il serait préférable de faire cela dans le HTML (ou le code derrière si c'est plus que du simple HTML). Les CSS servent à la mise en forme :)
16 votes
J'ai... personnellement, tendance à soutenir que, dans une liste, le formatage est une commodité, pas une nécessité. Dans ce cas, l'utilisation de CSS permet des ajouts ou des retraits plus simples de la liste que l'utilisation du code html ou du code côté serveur. Mais je suis étrange comme ça, parfois, et, honnêtement ymmv, etc... =)
10 votes
Et +1 pour l'utilisation de la virgule d'Oxford ! :)
5 votes
+1 pour "+1 pour la virgule d'Oxford". Je n'en ai jamais entendu parler (je ne suis pas natif). Mais une rapide recherche sur wiki indique que c'est naturel, car elle n'est pas utilisée dans de nombreuses langues. C'est drôle ce que l'on peut apprendre en cherchant dans la pile les problèmes de CSS ;)