Theme Customiser not live previewing changes on pseudo elements

Question

I've been working with the Theme Customiser API lately and found that pseudo elements are not live updating using the previewer. In my project I have an image containing a transparent overlay using pseudo elements.

   .hero-section:before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000000;
      opacity: 0.5;
    }

While this doesn't live update:

    // Update targeting a pseudo element.
    wp.customize( 'image_color', function( value ) {
        value.bind( function( newval ) {
            $('.hero-section:before').css('background', newval );
        } );
    } );

This does live update:

   // Update targeting a class.
   wp.customize( 'image_color', function( value ) {
       value.bind( function( newval ) {
           $('.hero-section').css('background', newval );
       } );
   } );

All settings are set using postMessage.

   $wp_customize->add_setting('image_color', array(
      'default'       => '#000000',
      'transport'     => 'postMessage',
   ) );

   $wp_customize->get_setting( 'image_color' )->transport = 'postMessage';

If I save changes (refresh) everything is working fine, the color is updated. How can it be that pseudo elements don't work when live updating?