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>
