Highlight the character at the cursor's position

I'm looking for a way to highlight the character that is currently before the cursor, i.e. when changing the position of the cursor, the highlighting would also update accordingly. I've come to a partial solution: I am able to color the last character before the cursor, but I have no idea how to remove the inserted span element when the next character is entered :(

CKEDITOR.instances.editor1.document.on('keypress', function(ev) {
    // if (ev.data.$.charCode == 97) { // for testing: run only when the 'a' character is entered

    var editor = CKEDITOR.instances.editor1;
    var selection = editor.getSelection();

    var element = new CKEDITOR.dom.element( "span" );
    element.setStyle( 'color', 'red' );
    element.setText(selection.getNative());
    editor.insertElement(element);

    // Put caret at the end of text
    var range = editor.createRange();
    range.moveToElementEditEnd( range.root );
    editor.getSelection().selectRanges( [range] );

    //}
});