Wordpress Customizer, FS and :after CSS

Question

Ok, I am trying to integrate my theme with the WordPress Customizer API.

Everything is OK, except for the JS part. I have this piece working as expected:

// Header back color.
wp.customize( 'header_backcolor', function( value ) {
    value.bind( function( to ) {
        if ( 'blank' === to ) {
            $( 'header' ).css( {
                'background': '#18bc9c'

            } );
        } else {
            $( 'header' ).css( {
                'background': to,
            } );
        }
    } );
} );

Now I need to apply the same modification (on the fly) to a header hr.star-light:after element, but this next piece is not working, although is the same code(I've only substituted header for header hr.star-light:after :

// Header Star Light back color. (not working)
wp.customize( 'header_backcolor', function( value ) {
    value.bind( function( to ) {
        if ( 'blank' === to ) {
            $( 'header hr.star-light' ).css( {
                'background-color': '#18bc9c'

            } );
        } else {
            $( 'header hr.star-light' ).css( {
                'background-color': to,
            } );
        }
    } );
} );

Can anybody show me what is wrong? Is it related to the :after pseudo CSS? I don't get it, cause it is working correctly at the inline CSS, after saving changes. My problem is only with the js to show changes in real time.

Answer 1

The jQuery codes you are using to apply the style changes on Fly applay the styles to HTML elements.

For example you are making a change in header background color so the result will be in the form

<header style="background:#333 /* Your custom background color */; ">
<?php bloginfo('name') // Site Title
?>
</header>

But this can't happen with the pseudo css elements because they are not the HTML Elements so style can't be applied to them as it is applied above.