CodePen

HTML

            
              

<nav>
  <a href="#">Primary Text</a>
  <a href="#">Primary Text</a>
  <a href="#" id="selected">Primary Text</a>
  <a href="#">Primary Text</a>
</nav>
            
          
!

CSS

            
              * {
    box-sizing:border-box;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  font-size: 80%;
}

nav {
  width: 10em;
  background: #eee;
  
  $box-shadow-size: .25em;
  box-shadow: inset (-$box-shadow-size) 0 $box-shadow-size rgba(black, .5);
}

a {
  color: inherit;
  text-decoration: none;
}

a {
  display: block;
  padding: 1em;
  
  &#selected {
    color: white;
    position: relative;
    $background: rgb(75, 123, 240);
    background: linear-gradient(to left, darken($background, 10), $background, darken($background, 10));
    $box-shadow-size: .5em;
    box-shadow: inset (-$box-shadow-size) 0 $box-shadow-size rgba(black, .5);
    
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      
      $border-width: 7px;
      $border-height: $border-width;
      border: {
        top: $border-height solid transparent;
        bottom: $border-height solid transparent;
        right: $border-width solid white;
      }
    }
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).on("click", "a:not(#selected)", function() {
  $("a#selected").attr("id", "");
  $(this).attr("id", "selected");
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................