Add an indicator on link hover, for links opening in new tab (target=_blank)

    

      Copy
      
    
    
      function my_custom_script() {
    wp_enqueue_script( 'jquery' );
    wp_add_inline_script( 'jquery', 'jQuery(document).ready(function($) {
        $("a[target=\'_blank\']").each(function() {
            $(this).append(\' <span class="external-link-icon">\u2197</span>\');
            $(this).find(".external-link-icon").hide();
        });
        $("a[target=\'_blank\']").hover(function() {
            $(this).find(".external-link-icon").show();
            console.log("Link with target=\'_blank\' hovered");
        }, function() {
            $(this).find(".external-link-icon").hide();
        });
    });' );
	
?>
	<style>
	.external-link-icon {
	position:absolute;
    display: inline-block;
    font-size: 10px;
	margin-left: 5px;
    }
	</style>
<?php
    wp_enqueue_style( 'external-link-style', get_stylesheet_directory_uri() . '/external-link-style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_script' );
    
    

	
How to use this
	
      Copy