Combining CSS Pseudo-elements after the last-child

Question

I want to make  grammatically correct  lists using CSS  This is what I have so far   The  lt li gt  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

User · Answer

I do like this for list items in  lt menu gt  elements  Consider the following markup    lt menu gt     lt li gt  lt a href   member profile  gt Profile lt  a gt  lt  li gt     lt li gt  lt a href   member options  gt Options lt  a gt  lt  li gt     lt li gt  lt a href   member logout  gt Logout lt  a gt  lt  li gt   lt  menu gt    I style it with the following CSS   menu  gt  li     display  inline     menu  gt  li  after     content            menu  gt  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

User · Answer

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

User · Answer

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   x000D   x000D  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    x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt ul gt  x000D       lt li gt One lt  li gt  x000D       lt li gt Two lt  li gt  x000D       lt li gt Three lt  li gt  x000D     lt  ul gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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  8212 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    lt html gt    lt head gt     lt style type  text css  gt       byline-list         list-style  none        padding  0        margin  0             byline-list  gt  li         display  inline        padding  0        margin  0             byline-list  gt  li  before         content                   byline-list  gt  li last-child  before         content     and               byline-list  gt  li first-child   li last-child  before         content    and               byline-list  gt  li first-child  before         content   By               byline-list  gt  li last-child  after         content                lt  style gt    lt  head gt    lt body gt     lt ul class  byline-list  gt      lt li gt Adam Smith lt  li gt     lt  ul gt     lt ul class  byline-list  gt      lt li gt Adam Smith lt  li gt  lt li gt Jane Doe lt  li gt     lt  ul gt     lt ul class  byline-list  gt      lt li gt Adam Smith lt  li gt  lt li gt Jane Doe lt  li gt  lt li gt Frank Underwood lt  li gt     lt  ul gt    lt  body gt   lt  html gt    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

User · Answer

This works     I hope multi-browser  Firefox likes it    x000D   x000D  li   display  inline  list-style-type  none    x000D  li after   content          x000D  li last-child before   content   and      x000D  li last-child after   content         x000D   lt html gt  x000D     lt body gt  x000D       lt ul gt  x000D         lt li gt One lt  li gt  x000D         lt li gt Two lt  li gt  x000D         lt li gt Three lt  li gt  x000D       lt  ul gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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    List item 1 List item 2 List item 3   to   List Item 1  List Item 2  List Item 3

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

Examples related to css