CSS selector : after pseudo element of the last item of a list with a given class [duplicate]

问题

This question already has answers here:

CSS last-child selector: select last-element of specific class, not last child inside of parent? (6 answers)

Can I combine :nth-child() or :nth-of-type() with an arbitrary selector? (6 answers)

:last-child not working as expected? (4 answers)

CSS selector for first element with class (17 answers)

Closed 2 months ago.

I have 5 buttons. They have an underlayer that make them seem they are active, as you will see in the snippet.

Each button can have an active state, but only starting from 1, and ending anywhere to 5.

They all have a divider, displayed in red in the snippet.

I would like to keep the divider into the underlayer, outside of the underlayer, but I would like to make it disappear at the end of the underlayer (in snippet, after button #2).

I have used the selector button.active:last-child:after but it doesn't seem to work.

Any ideas about that ?

.container {
  display: flex;
  align-items: stretch;
  justify-content: start
  margin: 12px;
  position: relative;
}

button:after {
  content: '';
  height: 100%;
  position: absolute;
  background: red;
  left: calc(100% + 12px);
  width: 1px;
  top: 0;
}

button.active:last-child:after {
  content: none;
}

button {
  flex: 0 0 calc(20% - 24px);
  border: 0;
  height: 32px;
  color: black;
  text-transform: uppercase;
  text-align: center;
  margin-right: 24px;
  background: transparent;
  position: relative;
}

button.active {
  color: white;
}

.active-pill {
  background: teal;
  position: absolute;
  height: 32px;
  border-radius: 16px;
  background: teal;
  width: calc(40% - 12px);
  z-index: -1;
}

<div class="container">

  <div class="active-pill"></div>
  
  <button class="active">Step 1</button>
  <button class="active">Step 2</button>
  <button>Step 3</button>
  <button>Step 4</button>
  <button>Step 5</button>
</div>

<h3>
  Which selector to use to remove the content after button #2 ?
</h3>

来源：https://stackoverflow.com/questions/58524290/css-selector-after-pseudo-element-of-the-last-item-of-a-list-with-a-given-clas