How to solve this problem with active menu item

Question

I have a small problem with my active class on a menu item. I am trying to add a border around active menu item, like in this hover state, but when I try to add that to my menu item it’s all messed up. What I try to achieve for active class is this: 

.nav-menu {
  list-style: none;
  margin-top: 18px;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav-menu li {
  float: left;
  border-left: 1px solid #1e3866;
  padding: 5px 10px;
}

.snip1189 li {
  display: inline-block;
  list-style: outside none none;
  padding: 0;
}

.snip1189 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.nav-menu li a {
  color: #1e3866;
  font-size: 13px;
}

.snip1189 a {
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}

.snip1189 a:before,
.snip1189 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}

.snip1189 a:before {
  left: 0;
  top: 0;
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

.snip1189 a:after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #1d3768;
  border-bottom: 2px solid #1d3768;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.snip1189 a:hover,
.snip1189 .current a {
  color: #4a4949;
  font-weight: bold;
}

.snip1189 a:hover:before,
.snip1189 .current a:before,
.snip1189 a:hover:after,
.snip1189 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}

.active {
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

<div class="pull-right">
  <ul class="nav-menu snip1189">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="active">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Also see my jsfiddle link: https://jsfiddle.net/pevabL5q/ Can anybody help me with this?

Answer 1

Right now your .active rule is translating the a down and to the right per transform: translate(100%, 50%);. It's also adding a solid red border on the left and top, which I'm not sure you intended to do. I've removed your current .active rules and added the following 2 selectors to the current hover rules to show the 2 borders.

.snip1189 a.active:before,
.snip1189 a.active:after,

.nav-menu {
  list-style: none;
  margin-top: 18px;
}

ol,
ul {
  margin-top: 0;
  margin-bottom: 10px;
}

.nav-menu li {
  float: left;
  border-left: 1px solid #1e3866;
  padding: 5px 10px;
}

.snip1189 li {
  display: inline-block;
  list-style: outside none none;
  padding: 0;
}

.snip1189 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.nav-menu li a {
  color: #1e3866;
  font-size: 13px;
}

.snip1189 a {
  padding: 0.2em 0.5em;
  margin: 0.2em 0;
  display: block;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
  text-decoration: none;
}

.snip1189 a:before,
.snip1189 a:after {
  height: 14px;
  width: 14px;
  position: absolute;
  content: '';
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  opacity: 0;
}

.snip1189 a:before {
  left: 0;
  top: 0;
  border-left: 2px solid #e52b25;
  border-top: 2px solid #e52b25;
  -webkit-transform: translate(100%, 50%);
  transform: translate(100%, 50%);
}

.snip1189 a:after {
  right: 0;
  bottom: 0;
  border-right: 2px solid #1d3768;
  border-bottom: 2px solid #1d3768;
  -webkit-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.snip1189 a:hover,
.snip1189 .current a {
  color: #4a4949;
  font-weight: bold;
}

.snip1189 a.active:before, /* added this line */
.snip1189 a.active:after, /* added this line */
.snip1189 a:hover:before,
.snip1189 .current a:before,
.snip1189 a:hover:after,
.snip1189 .current a:after {
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
  opacity: 1;
}

<div class="pull-right">
  <ul class="nav-menu snip1189">
    <li><a href="#">Home</a></li>
    <li><a href="#" class="active">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>