CSS animation needs correction - css

Question

I would really appreciate your help if you could check below in the codepen my css animation.
I'm trying to make this work better. I want this underline to start from below the icon, not to be stuck to the window, but to have some space from right just under the first icon.
* {
box-sizing: border-box;
}
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}
.container {
width: 100%;
margin: 0 auto;
}
ul li {
display: inline;
text-align: center;
}
a {
display: inline-block;
width: 25%;
padding: .75rem 0;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ hr {
margin-left: 40%;
}
.one:hover ~ hr {
margin-left: 12.5%;
}
.three:hover ~ hr {
margin-left: 66%;
}
.four:hover ~ hr {
margin-left: 75%;
}
hr {
height: .25rem;
width: 20%;
margin: 0;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
.home-content-1{background-color: #F7F8F9; text-align: center;padding:5em 0em 2em;}
.home-content-1 .row{margin-top: 2em;}
.home-content-1 h3{font-weight: 700;text-transform: uppercase;color: #646464;font-size: 1.3125em;}
.hc-icon{width: 150px;height: 150px;border-radius: 50%;margin: 0px auto 2.25em;}
.hc-icon img{padding-top: 30px;}
.hc-icon1{background: #b5d73c;}
.hc-icon2{background: #32aaeb;}
.hc-icon3{background: #ef3f54;}
.circles li { padding: 10px;}
hr {
height: .25rem;
width: 22%;
margin-left: 12.5%;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
<div class="home-content-1">
<div class="container">
<h1>The Blabla Approach</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="row">
<div class="col span_1_of_4">
<ul class="circles">
<li class="one"><a href="#">
<div class="hc-icon hc-icon1"></div>
<h3>Demand Generation</h3></a></li>
<li class="two"><a href="#"><div class="hc-icon hc-icon1">
</div>
<h3>Demand Generation</h3></a>
</li>
<li class="three">
<a href="#">
<div class="hc-icon hc-icon1"></div>
<h3>Demand Generation</h3></a></li>
<hr />
</ul>
</div>
Please see all my code here -
http://codepen.io/anetk/pen/QyZLNb

Answer 1

Personally, I would do this. I eliminated all the title stuff to isolate what you're trying to do. I substituted your 'hr' element with a 'div'. Changing the div's relative position to the parent container feels a lot safer than changing margins on an 'hr' element that's sized to the body. This responsively sizes the 'highlight' div with the 'li' elements. You can adjust the 'circles' container's margins and widths to your liking.
HTML:
<ul class="circles">
<li class="one">
<a href="#">
<div class="hc-icon hc-icon1"></div>
<h3>Demand Generation</h3>
</a>
</li>
<li class="two">
<a href="#">
<div class="hc-icon hc-icon1"></div>
<h3>Demand Generation</h3></a>
</li>
<li class="three">
<a href="#">
<div class="hc-icon hc-icon1"></div>
<h3>Demand Generation</h3>
</a>
</li>
<div class="highlight"></div>
</ul>
CSS:
body {
font: 300 100% 'Helvetica Neue', Helvetica, Arial;
margin:0;
}
.circles {
display:inline-block;
width:80%;
margin:0 10%;
padding:0;
}
.circles li {
display:inline-block;
list-style-type:none;
text-align:center;
width:33%;
}
.highlight {
position:relative;
left:0;
height:5px;
width:33%;
background: tomato;
transition: .3s ease-in-out;
}
a {
display: inline-block;
width: 100%;
margin: 0;
text-decoration: none;
color: #333;
}
.two:hover ~ .highlight {
left: 33%;
}
.three:hover ~ .highlight {
left: 66%;
}
.circles h3{font-weight: 700;text-transform: uppercase;color: #646464;font-size: 1.3125em;}
.hc-icon{width: 150px;height: 150px;border-radius: 50%;margin: 0px auto 2.25em;}
.hc-icon1{background: #b5d73c;}
.hc-icon2{background: #32aaeb;}
.hc-icon3{background: #ef3f54;}
http://codepen.io/midgitsuu/pen/VeEKgQ

Answer 2

Easiest solution is to put a style on the <hr> to shift it's starting position.
css:
hr {
height: .25rem;
width: 20%;
margin-left: 12.5%;
background: tomato;
border: none;
transition: .3s ease-in-out;
}
The idea is to align the hr with the first circle. You want to use a % and not px so that the align will be responsive with the size of the window.
The change was from margin: 0; to margin-left: 12.5%;