Combining CSS Pseudo-elements, ":after" the ":last-child"
Solution 1:
This works :) (I hope multi-browser, Firefox likes it)
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }<html>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</body>
</html>Solution 2:
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).
Solution 3:
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.
Solution 4:
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.
Solution 5:
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: "."; }