Get charater under mouse cursor (by wrapping each one in a span) and insert some virtual text caret after it on click.

This demo demonstrates how to get a character under a mouse cursor (in onclick event handler), then insert some virtual text caret (not blinking) after that character.

by viphalongpro

HTML

<div class='inter-letters'>Click on one of the characters ...</div>

CSS

.v-caret {
    width:.5em;
    height:1em;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    background:linear-gradient(to right, transparent .23em, currentColor .25em, transparent .27em);
    display:inline-block;    
    vertical-align:middle;    
    margin:0 -.2em;
    display:none;
}
.inter-letters {
    font-size:30px;
    color:green;
}

JavaScript

$('.inter-letters').on('click','span.letter', function(){
    //show the virtual caret first
    virtualCaret.css('display','inline-block');
    //insert the virtual caret after the clicked character (which is wrapped in a span).
    $(this).after(virtualCaret);
}).html(function(i,oldhtml){
    return oldhtml.replace(/./g,"<span class='letter'>$&</span>");
});
var virtualCaret = $('<div>').addClass('v-caret').appendTo('.inter-letters');
//clicking outside the div .inter-letters should hide the virtual caret
$(document).click(function(e){    
    if(!$('.inter-letters').has(e.target).length) {        
        virtualCaret.css('display','none');
    }
    
});