How to reset CSS ::after style only for last element?

Question

I am using :after and :before CSS on my event. I have a button called timeline. when I click on timeline button it adds an event and using :after I connect this event that looks nice but I want to remove the last event after effect.

Here I paste my code that works properly I am adding an image that shows you what's going wrong.

Here is my code:

div[type="timeline"]>section {
  margin: auto;
  width: 900px;
  z-index: 100;
  opacity: 0.5;
  border-left: 4px solid #00BCD4;
  border-top: 1px solid grey;
  min-height: 250px;
  background-color: #b3e5fc2b;
  border-radius: 4px;
  margin-bottom: 55px;
  position: relative;
  top: 50px;
  box-shadow: rgb(136, 136, 136) 3px 3px 1px;
  -webkit-animation: fadein 2s -moz-animation: fadein 2s;
  -ms-animation: fadein 2s;
  -o-animation: fadein 2s;
  animation: fadein 2s;
}

div[type="timeline"]>section:hover {
  opacity: 1;
}

div[type="timeline"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  width: .2rem;
  background: white;
  height: 55px;
}

div[type="timeline"]>section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55px;
  width: .2rem;
  background: grey;
  height: 55px;
}

div[type="timeline"]>section>header {
  font-weight: 600;
  color: cadetblue;
  transform: translate(16px, 23px);
  font-size: 34px;
  font-family: arial;
  position: relative;
}

div[type="timeline"]>section>article {
  transform: translate(12px, 14px);
  color: black;
  font-size: 22px;
  font-family: arial;
  position: relative;
  padding: 10px;
  word-wrap: break-word;
}

<div type='timeline' id='slide'>
  <section>
    <header>Title One</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Two</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Three</header>
    <article>Content</article>
  </section>
  <section>
    <header>Title Four</header>
    <article>Content</article>
  </section>
</div>

Answer 1

You can use :last-of-type, :last-child, :nth-last-of-type(1) or :nth-last-child(1) to target the last section and reset pseudo element in it:

div[type="timeline"]>section:last-of-type::after {
  display: none;
}

Or use :not() selector to filter out the last section directly:

div[type="timeline"]>section:not(:last-of-type)::after {
  ...
}