css - MagicLine jQuery - length of underline -

css - MagicLine jQuery - length of underline -

i tried utilize magicline jquery navigation on website, i've run little problem. want underline exactly long word it's highlighting. instead it's few pixels longer , can't deal that. tried prepare css failed. believe solution of problem can found in jquery code, i'm not familiar i'm asking help. how shorten length of underline in jquery?

here can find magicline jquery navigation , here graphic description of problem.

i create tweaks create fit requirement

$("#example-one li").find("a").hover(function() { $el = $(this); var padding = ($el.outerwidth() - $el.width()) / 2; console.log($el.outerwidth(),$el.width(), padding) leftpos = $el.position().left + padding; newwidth = $el.width(); $magicline.stop().animate({ left: leftpos, width: newwidth }); }, function() { $magicline.stop().animate({ left: $magicline.data("origleft"), width: $magicline.data("origwidth") }); });

also need alter current_page_item also

var $currentitem = $(".current_page_item a"); var padding = ($currentitem.outerwidth() - $currentitem.width()) / 2; $magicline .width($currentitem.width()) .css("left", $currentitem.position().left + padding) .data("origleft", $magicline.position().left ) .data("origwidth", $magicline.width());

demo: fiddle

jquery css navigation underline