Loading a stylesheet conditionally & verifying CSS

There are several posts similar to this problem, but I need to still ask for help...

The need is to change the column heading for posts if the Archived Posts page is selected in the menu (normally 'Highlighted Posts' is displayed in the heading.)

This is illustrated in this screen shot; note the only difference is the text in the ::before::after element:

Here is the code in my child theme functions.php file:

function register_arch_posts_stylesheet() {
    wp_register_style( 'arch-post-stylesheet', get_stylesheet_directory_uri() . '/arch-post-stylesheet.css' );
}

add_action( 'init', 'register_arch_posts_stylesheet' );
function arch_posts_conditionally_enqueue_the_stylesheet() {
    // only enqueue on archived-posts page 
    if ( is_page( 'archived-posts' ) ) {
        wp_enqueue_style( 'arch-post-stylesheet' );
    }
}

add_action( 'wp_enqueue_scripts', 'arch_posts_conditionally_enqueue_the_stylesheet' );

And here is CSS in file arch-post-stylesheet.css:

.coolwp-posts-heading::after {
        content: Archived Posts;    
}

But when I load the Archived Posts page, nothing happens; how can I verify the stylesheet is loading, and if loading, that the CSS is working? TIA....