CSS <hr> width transition

I'm attempting to create transitions on the social media links on https://test-name.github.io/ but i'm having trouble making it work as expected.

When hovering on each icon, my aim is for the hr bar to smoothly transition both left and right sides to the correct point whilst making it smaller. At the moment it moves the beginning of the bar to the set point of the smaller part and then reduces it smoothly. I'm not really sure how to approach this, i'm mainly experimenting with css and transitions now.

I've made a JSFiddle here as best I can.

.social-links {
  margin: 0 auto;
  width: 50%;
}
hr {
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease;
}
@media (min-width: 768px) {
  .social-links {
    width: 30%;
  }
}
.social-links span {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 15px;
}
@media (min-width: 420px) {
  .social-links span {
    font-size: 2rem;
    margin-top: 25px;
  }
}
.fa-github:hover {
  color: #64a4df;
}
.github-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 9%;
}
.fa-linkedin-square:hover {
  color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 34%;
}
.fa-twitter-square:hover {
  color: #64a4df;
}
.twitter-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 59%;
}
.fa-facebook-square:hover {
  color: #64a4df;
}
.facebook-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 84%;
}
.social-link {
  margin-bottom: 20px;
  padding-right: 0px;
  padding-left: 0px;
  height: 20px;
  width: 20px;
  background: red;
}

<div class="social-bar">
  <div class="col-xs-12">
    <div class="social-links">

      <div class="col-xs-3 github-link social-link">
        <a href="https://github.com/test-name" target="github">
          <span class="fa fa-github"></span>
        </a>
      </div>
      <div class="col-xs-3 linkedin-link social-link">
        <a href="https://www.linkedin.com/in/test-name-43565497" target="linkedin">
          <span class="fa fa-linkedin-square"></span>
        </a>
      </div>
      <div class="col-xs-3 twitter-link social-link">
        <a href="https://twitter.com/test-name" target="twitter">
          <span class="fa fa-twitter-square"></span>
        </a>
      </div>
      <div class="col-xs-3 facebook-link social-link">
        <a href="https://www.facebook.com/test-name" target="facebook">
          <span class="fa fa-facebook-square"></span>
        </a>
      </div>

      <hr class="social-line">
    </div>
  </div>
</div>

Solution

You are changing two properties here, width and margin-left. Therefore, you need to set transition both for width (as you did) and for margin-left. For it to work smoothly, you will need to set a numeric initial value for `margin-left'. This worked for me:

.social-links {
  margin: 0 auto;
  width: 50%;
}
hr {
  margin-left: 5%;
  width: 90%;
  border-top: 2px solid #8c8b8b;
  transition: width 0.5s ease, margin-left 0.5s ease;
}
@media (min-width: 768px) {
  .social-links {
    width: 30%;
  }
}
.social-links span {
  width: 100%;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 15px;
}
@media (min-width: 420px) {
  .social-links span {
    font-size: 2rem;
    margin-top: 25px;
  }
}
.fa-github:hover {
  color: #64a4df;
}
.github-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 9%;
}
.fa-linkedin-square:hover {
  color: #64a4df;
}
.linkedin-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 34%;
}
.fa-twitter-square:hover {
  color: #64a4df;
}
.twitter-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 59%;
}
.fa-facebook-square:hover {
  color: #64a4df;
}
.facebook-link:hover ~ .social-line {
  width: 7.5%;
  margin-left: 84%;
}
.social-link {
  margin-bottom: 20px;
  padding-right: 0px;
  padding-left: 0px;
  height: 20px;
  width: 20px;
  background: red;
}

<div class="social-bar">
  <div class="col-xs-12">
    <div class="social-links">

      <div class="col-xs-3 github-link social-link">
        <a href="https://github.com/test-name" target="github">
          <span class="fa fa-github"></span>
        </a>
      </div>
      <div class="col-xs-3 linkedin-link social-link">
        <a href="https://www.linkedin.com/in/test-name-43565497" target="linkedin">
          <span class="fa fa-linkedin-square"></span>
        </a>
      </div>
      <div class="col-xs-3 twitter-link social-link">
        <a href="https://twitter.com/test-name" target="twitter">
          <span class="fa fa-twitter-square"></span>
        </a>
      </div>
      <div class="col-xs-3 facebook-link social-link">
        <a href="https://www.facebook.com/test-name" target="facebook">
          <span class="fa fa-facebook-square"></span>
        </a>
      </div>

      <hr class="social-line">
    </div>
  </div>
</div>