How to animate an ":after" using CSS or jQuery

Question

I have a menu that lools like this: Fiddle.

$(".squ").click(function() {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});

.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
.squ:hover {
  background-color: #419EE6;
}
.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}
.sec1 .squ {
  cursor: pointer;
}
.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}
.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}
.pen:after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>

<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>

When clicking on one of the list items I switch between 2 classes. The selected one gets a class (.pen) that has an :after (CSS) that looks like an arrow.

How can I animate it as if it's going out of the div (from left to right)

You can't access pseudoelements with javascript, which makes this a duplicate of [this](http://stackoverflow.com/questions/17788990/access-the-css-after-selector-with-jquery), but as you're also asking for solutions in CSS, maybe someone has a working answer. — adeneo, Jan 06 '16 at 14:21
@ElectricWizard Kindly check my answer and respond. Please accept if it is something that you think. `:)` — Praveen Kumar Purushothaman, Jan 06 '16 at 14:38

Praveen Kumar Purushothaman · Accepted Answer · 2016-01-06T14:57:04.430

You need to already have it defined. And then use the position to animate. display and similar things cannot be animated (see CSS Animatable Properties). Also what you are trying to do is similar to bringing something from display: none to display: block.

So what I am doing here is:

Change .pen p::after to p::after with z-index: -1 and right: 15px, a value more than its width.
Animate the right property to right: 15px; or somewhere it correctly matches.
Corrected the top: 0; property.
To make this working always, delegate the events to the possible static parent. You are assigning to the class, which changes from clicking. So it is not static.

Working Snippet

$(document).on("click", ".squ", function () {
  $('.pen').addClass('squ');
  $('.pen').removeClass('pen');
  $(this).removeClass("squ");
  $(this).addClass("pen");
});

.squ {
  background-color: #0266B4;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}

.squ:hover {
  background-color: #419EE6;
}

.squ p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
}

.sec1 .squ {
  cursor: pointer;
}

.pen {
  background-color: #419EE6;
  width: 188px;
  height: 21px;
  position: relative;
  text-transform: uppercase;
  display: table;
  margin: 7px 0 0 0;
  color: white;
  font-size: 14px;
}

.pen p {
  margin: 0;
  display: table-cell;
  vertical-align: middle;
  padding-left: 30px;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  cursor: default;
}

p::after {
  content: '';
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 22px solid #419EE6;
  position: absolute;
  transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  right: 15px;
  z-index: -1;
  top: 0;
}

.pen p::after {
  right: -20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pen">
  <p id="e-w" onclick="checkDisableCbs(this.id);">banana</p>
</div>
<div class="squ">
  <p id="qin" onclick="checkDisableCbs(this.id);">apple</p>
</div>

How to animate an ":after" using CSS or jQuery

1 Answers1