Custom colour not pulling through correctly inside loop

Question

I have the following loop which pulls through and lists a custom taxonomy. In this case it's listing all of the 'product categories' from my custom post type 'Products'.

<!-- Product Categories =========================================== -->

                <?php

                $taxonomy = 'product_category';
                $terms = get_terms($taxonomy); // Get all terms of a taxonomy

                if ( $terms && !is_wp_error( $terms ) ) :
                ?>
                    <div class="container-flex">
                    <div class="row">
                    
                        <?php foreach ( $terms as $term ) { 
                            $image = get_field('icon', $term ); 
                            $primarycolor = get_field('category_colour_primary', $term);
                            $secondarycolor = get_field('category_colour_secondary', $term);
                            $url = $image['url'];
                            $title = $image['title'];
                            $alt = $image['alt'];

                            $size = 'large';
                            $thumb = $image['sizes'][ $size ];

                        ?>

                        <style type="text/css">
                            .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
                            .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
                        </style>

                            <div class="col-md-4">
                                <div class="sector-item-container" style="position: relative;">

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div class="sector-overlay"></div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div>  
                                            <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
                                        </div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <h4><?php echo $term->name; ?></h4>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <p><?php echo $term->description; ?></p>
                                    </a>

                                    <div class="product-read-more-link"> 
                                        <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span> 
                                    </div> 

                                </div>
                            </div>


                        <?php } ?>
                    </div>
                    </div>
                <?php endif;?>
                <?php wp_reset_postdata(); ?>

The term: $primarycolor = get_field('category_colour_primary', $term); seems to be working fine, as I'm using it to colour the text:

<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span>

But when I try and use it to style the pseudo elements :before and :after, of the span, it seems to style them all as the last colour in the list of colours that are pulled through...

You'll see here its colouring the arrow, but its colouring them all blue, the colour of the last taxonomy...

In the inspector, it seems like its cycling through all of the taxonomy colours and settling on the last one.

Because I am styling pseudo elements, and I can't style them inline using <?php echo $primarycolor; ?>, I have had to add the styles inside the loop:

<style type="text/css">
    .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
</style>

Can anyone advise me where I'm going wrong?

Answer 1

Try to add some counter

$css_key = 0;
foreach ( $terms as $term ) { 
  $css_key++;

and then add this counter to your css selector

<style type="text/css">
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):before { background-color: <?php echo $primarycolor; ?>; }
</style>