Making inline/horizontal list -- issues with second last child-CodePudding

[I have seen many questions of a similar kind but those solutions don't work here]

I am making an inline list which should appear like this (depending on number of items):

First example: Apples. Second example: Apples and Oranges. Third example: Apples, Oranges and Mangoes.

This CSS is ok:

.fruits {font-weight: bold; color: #999999}
.fruits ul {display: inline; padding: 0}
.fruits li {display: inline}
.fruits li:after {content: ", ";}
.fruits li:last-child:after {content: ".";}

HTML is this:

<div >
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Mangos</li>
</ul>
</div>

The comma needs to be dropped after nth-2nd child, and be replaced by 'and'.

But I can't make the following work:

.fruits li::nth-last-child(2):after {content: "and ";}

What am I missing here, please?

CodePudding user response：

you should target your second list item .fruits class differently. The way to do so is like this .fruits li:nth-child(n)::after { content: " your text" ; }

The n inside parentheses is the number of the list's item.

.fruits {font-weight: bold; color: #999999}
.fruits ul {display: inline; padding: 0}
.fruits li {display: inline}
.fruits li:after {content: ", ";}
.fruits li:last-child:after {content: ".";}
.fruits li:nth-child(2)::after {content: " and ";}

<div >
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Mangos</li>
  </ul>
</div>