Изменить класс последнего экземпляра элемента в al oop с помощью WordPress / ACF

Question

Я хочу вставить изображение стрелки между каждым div с классом product-icon в WordPress l oop, используя псевдоэлемент :: after CSS. Прямо сейчас стрелка появляется после каждый product-icon div, который заполняет l oop, но я хочу, чтобы он был скрыт после последнего (и количество отображаемых div меняется в зависимости от того, на какой странице вы находитесь. на). Я предполагаю, что мне нужно будет изменить класс последнего div в l oop, но я не уверен, как это сделать. Вот версия HTML, чтобы вы могли видеть, как она должна выглядеть:

<section id="case-study-product-overview" class="horizontal">
  <div class="max-container">
    <div id="product-map-container">
    
      <div>
        <div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 1</p></div>
          <div class="product-card">
            <h3 class="product-overview-title green-text">Title 1</h3>
              <img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
                <p class="blurb">Lorem ipsum dummy paragraph text.</p>
                </div> 
      </div>
      
          <div>
        <div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 2</p></div>
          <div class="product-card">
            <h3 class="product-overview-title green-text">Title 2</h3>
              <img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
                <p class="blurb">Lorem ipsum dummy paragraph text.</p>
                </div> 
      </div>
      
          <div>
        <div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 3</p></div>
          <div class="product-card">
            <h3 class="product-overview-title green-text">Title 3</h3>
              <img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
                <p class="blurb">Lorem ipsum dummy paragraph text.</p>
                </div> 
      </div>
    </div>
  </div>
</section>

вот PHP Я ДЕЙСТВИТЕЛЬНО работаю с:

<section id="case-study-product-overview" class="horizontal">
  <div class="max-container">
    <h2 class="cs-heading eaton-blue-text">Product Overview</h2>
    <div id="product-map-container">
      <?php if ( have_rows('product_overview_map') ): ?>
        <?php while( have_rows('product_overview_map') ): the_row(); ?>
          <div>

    <!-- ** This line is what the arrow should come after, except the last one** -->

            <div class="product-icon"><img src="<?php echo get_sub_field('product_overview_icon'); ?>"/>
</div>
    <!-- -->

              <p class="icon-subtitle"><?php echo get_sub_field('product_overview_icon_label'); ?></p>
              <div class="product-card">
                <h3 class="product-overview-title eaton-blue-text"><?php echo get_sub_field('product_title'); ?></h3>
                <img class="product-image" src="<?php echo get_sub_field('product_image'); ?>" />
                <p class="blurb"><?php echo get_sub_field('product_description'); ?></p>
              </div> 
            </div>
          <?php endwhile; ?>
        <?php endif; ?>                 
      </div>
    </div>
</section>

и CSS :

#case-study-product-overview .ecosystem-diagram {
     min-height:650px;
     margin-top:3%;
}
 #case-study-product-overview .ecosystem-item {
     position:absolute;
     width:250px;
     align-items:center;
     margin-left:-125px;
     margin-top:-100px;
}
#case-study-product-overview .image {
     width:300px;
     height:300px;
     display:flex;
     align-items:flex-end;
}
 #case-study-product-overview .image img {
     max-height:250px;
     max-width:245px;
}
.product-icon::after {
    content: url(http://wordpress-dev.tcc.etn.com/wordpress/iot/wp-content/uploads/sites/11/2019/07/arrows.png);
    position: absolute;
    top: 25px;
    margin:0 32px;
}
.last-product-icon::after {
  content:'';
}
.product-icon > img {
     width: 50px;
     height: 50px;
}
#product-map-container {
  display: flex;
  margin: 50px 0;
  justify-content: center;
  position: relative;
}
#product-map-container > div {
  margin: 10px;
  text-align: center;
}
.product-card {
  box-shadow: 1px 1px 6px 1px #999;
  max-width: 240px;
  min-height: 475px;
  padding: 10px;
}
.product-image {
  width: 200px;
  margin:auto;
}

Любая помощь будет принята с благодарностью. Спасибо!