Setting margin-left and width of an element to match margin and size of another element

Question

I would like to make a menu effect such as on the example below, where HR tag is used to create sliding line effect under menu items.
But in the example under the link the "moving" hr is positioned using static settings (see the link for actual example):

http://codepen.io/rm/pen/ldhon

   .two:hover ~ hr {
     margin-left: 25%;
   }

I have a set of images that constitute my website menu, but these are positioned in floating way and I do not know their position at design time. I need therefore to modify code above in such a way that at least margin-left matches the position of the element (image) that has class two (the one that gets hovered) and, if possible, also match its width to the width of the element with class two . How I could possibly achieve that, do I manage with css or have to have a jQuery code?

Answer 1

If you set the hr 's position to absolute, you can set its left offset and width with jQuery:

$('.container a').mouseover(function() {
  $('.container hr').css({
    left: $(this).offset().left,
    width: $(this).width()
  });
});

I don't think you can do so in CSS alone without hard-coding the widths.

CodePen