jQuery根据父级宽度获取元素的位置。 .position（）

Question

在下面的小提琴中，您可以看到我正在尝试在哪里基于父级在子元素的左侧位置，以便可以在此处放置标记。但是$this.position().left;的所有结果总是超过应有的结果。

您将如何修改小提琴以使.line移到悬停的元素上？

https://jsfiddle.net/57d0cw46/27/

html

<ul class="inline pricing-list">
    <div class="line">|</div>
    <li>
        <a data-index="1">
            <div class="qty">48</div>         
            <div class="price">$15</div>
        </a>
    </li>

    <li>
        <a data-index="2">
            <div class="qty">60</div>      
            <div class="price">$13</div>
        </a>
    </li>

    <li>
        <a data-index="3">
            <div class="qty">120</div>
            <div class="price">$11.5</div>
        </a>
    </li>
</ul>

js

const $trigger = $('[data-index]');
const $line = $('.line');
$trigger.hover( function() {
    const place = $(this).position().left;
    $line.css('margin-left',place+'%');
});