ansaurus

Question

Combining CSS Pseudo-elements, ":after" the ":last-child"

Answer 1

+3 A:

This works :) (I hope multi-browser, Firefox likes it)

<html>
 <head>
  <style type="text/css">
   li { display: inline; list-style-type: none; }
   li:after { content: ", "; }
   li:last-child:before { content: "and "; }
   li:last-child:after { content: "."; }
  </style>
 </head>
 <body>
  <ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
  </ul>
 </body>
</html>

Zyphrax 2010-02-28 16:14:26

That was fast! Thanks a lot!

Derek 2010-02-28 16:16:36

@Derek, please select your or my answer as THE answer (by clicking left of the answer rating number). This makes it easier for other users with the same problem to find a solution.

Zyphrax 2010-02-28 16:54:53

Answer 2

+1 A:

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.

Derek 2010-02-28 16:14:43

So amazing that you can even use it for stuff it's not even intended for...

Guffa 2010-02-28 16:55:06

ansaurus

tags:

views:

answers:

Combining CSS Pseudo-elements, ":after" the ":last-child"

related questions