Insert ACF filed into CSS pseudo element - php

Question

I have this section on my website:
This is on my homepage, pulling through items of a custom post type called products.
Each product has it's own product colour, I've allowed the user to select this from an Advanced Custom Field Colour Picker.
I've created the Arrows using CSS :before and :after (one for the line and one for the arrow head), so I could colour them using the product colour ACF.
This would mean I would have to apply the colour inline, inside the template. But as I have used Pseudo classes, I don't believe I can style them inline.
To get around this I added a style block inside my loop... This seems to work but it's only taking the yellow colour as I assume it's the first colour it finds...
Is there a way around this? I'm not sure if I'm making it too complex...
Here's the separate CSS from the CSS document:
.products-item-inner .arrow-right:after {
content: "";
border: solid;
/* border-color: <?php the_field('product_colour'); ?>; */
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
/* background-color: <?php the_field('product_colour'); ?>;*/
content: "";
display: inline-block;
vertical-align: middle;
}
Here's the template loop with the added CSS <style> inline:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<style type="text/css">
.products-item-inner .arrow-right:after { border-color: <?php the_field('product_colour'); ?>; }
.products-item-inner .arrow-right:before { background-color: <?php the_field('product_colour'); ?>; }
</style>
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
Thanks for looking :)

Answer 1

Older browser support method
For maximum browser support, you can use the style attribute to assign a colour to your .arrow-right element, and can leverage currentColor in its pseudo-elements:
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right" style="color: <?php the_field('product_colour'); ?>;"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: currentColor;
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: currentColor;
content: "";
display: inline-block;
vertical-align: middle;
}
CSS Custom Property method
You could also use a CSS custom property, if you need the colour in more than one spot, where the method above won't work (unless you repeat the colour definition in several places).
I added it to your .products-item-outer element as a style attribute. This will cascade down into your .arrow-right pseudo-elements. I also added a fallback colour of rebeccapurple in this example, in case the value is missing.
<div class="container">
<div class="row">
<?php
$args = array(
'post_type' => 'products',
'posts_per_page' => 9999,
'orderby' => 'none'
);
$the_query = new WP_Query( $args );
?>
<?php if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- <a href="<?php the_permalink(); ?>"> -->
<div class="col-lg-4 products-item-outer" style="--product-color: <?php the_field('product_colour'); ?>;">
<div class="col-12 products-item-inner">
<div class="logo">
<?php
$image = get_field('logo');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="excerpt"><p><?php the_field('excerpt_text'); ?></p></div>
<div class="read-more-link">Read More<span class="arrow-right"></span></div>
</div>
</div>
<!-- </a> -->
<?php endwhile; wp_reset_postdata(); endif; ?>
</div>
</div>
.products-item-inner .arrow-right:after {
content: "";
border: solid;
border-color: var(--product-color, rebeccapurple);
border-width: 0 2px 2px 0;
display: inline-block;
vertical-align: middle;
padding: 5px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left:-12px;
}
.products-item-inner .arrow-right:before {
width: 30px;
height: 2px;
background-color: var(--product-color, rebeccapurple);
content: "";
display: inline-block;
vertical-align: middle;
}