How do I change where an image is when it is following my pointer?

So I have the code (see below). The orange line is meant to follow my mouse, however I want to change the position that the line sits under my mouse's pointer. Right now, it seems that the mouse pointer is centered right on the line. I want the line to be offset to the left a bit so that the mouse pointer's tip is centered on the line (roughly).

What I have tried doing is in the CSS, adding a "left" attribute and giving it 5px, however nothing, mainly because I think left is already being attributed in the code below.

Any help is greatly appreciated!

$(document).mousemove(function(e){
    $("#image").css({left:e.pageX})});

#image{
position:absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img id="image" src="https://cdn3.imggmi.com/uploads/2019/7/24/5274c06660578c6f2b538d23ff87b7e9-full.png"/>

from How do I change where an image is when it is following my pointer?