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">
    <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>

// CSS Code

.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;
We Well organized and easy-to-understand Interactive tutorials With lots of examples of how to use Tutorials WordPress, PHP, Bootstrap, Bootstrap 4, HTML, CSS, AJAX, jQuery, Woocommerce, Post, Database, Javascript, Theme, Responsive, Templates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact us

Fill in the form below or give us a call and we'll contact you. We endeavour to answer all enquiries within 24 hours on business days.