How to Current link blip on a navigational item

Use an inset in box-shadow.
Your HTML Code is invalid. ul can only have li as children…hr are not permitted.

// HTML Code
<nav class="side-nav">
  <ul>
    <li class="current-link"><a href="#"><i class="fa fa-home"></i>Home</a></li>
    <li><a href="#"><i class="fa fa-film"></i>Movies</a></li>
    <li><a href="#"><i class="fa fa-television"></i>TV Shows</a></li>
    <li><a href="#"><i class="fa fa-thumbs-up"></i>Liked</a></li>
    <li><a href="#"><i class="fa fa-thumbs-down"></i>Disliked</a></li>
    <li><a href="#"><i class="fa fa-sliders"></i>Settings</a></li>
  </ul>
</nav>


// CSS Code

<style>
.side-nav {
  background-color: rosybrown;
  margin-top: 50px;
  height: 50%;
}
.side-nav ul {
  list-style: none;
  padding: 0;
}
.side-nav ul li {
  padding-left: 20px;
  margin: 10px 0 20px 0;
}
.side-nav ul li a {
  text-decoration: none;
}
/* === UTILITY CLASSES === */


.current-link {
  box-shadow: 8px 0 0 0 red inset;
}
</style>