Can I use nth-child(2) with ::after?-CodePudding

20 year hand-coder here, scratching my head. My HTML structure is

<li><span></span><span></span><span></span></li>

This CSS is working: li span:last-child::before { content: 'foo '; }

... but this CSS is not: li span:nth-child(2)::before { content: 'bar'; }

Doesn't matter if the structure is div with paragraphs inside... same result. I've searched for info on using nth-child with ::before and ::after, and all indications are that you CAN.

What can you tell me?

CodePudding user response：

It does work

li span:last-child::before {
  content: 'last ';
}
li span:nth-child(2)::before {
  content: 'second ';
}
span {
  border: solid;
  padding: .1em;
  margin: 1em;
}

<ul>
  <li>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </li>
</ul>

CodePudding user response：

You CAN :)

li span:last-child:before {
content: 'foo';
}


li span:nth-child(2):before {
content: 'bar';
}

<ul>
  <li>
    <span>A</span>
    <span>B</span>
    <span>C</span>
  </li>
</ul>