css - animating pseudo element when passing to another element -

i got pseudo-element marks user's current choice in navigation bar. it's small upward triangle, icon font font-awesome. here's jsfiddle demo of (you need stretch result panel lined).

.subnav > ul > li.active > a:after {   position: relative;   text-align: center;   font-family: fontawesome;   top: 25px;   right: 50%;   content: "\f0de";   color: #c1c1c1; } 

i've added basic jquery function switches .active class, , i'm wondering if there's way animate transition of pseudo element it'll move horizontally new position.

i know pseudo-elements transition thing, searching , googling around couldn't find similar i'm looking for. possible?

in solution used :target pseudo class switch states, recommend stick jquery function switches .active class.

fiddle

markup

<div class="page" id="one">page one</div> <div class="page" id="two">page two</div> <div class="page" id="three">page three</div>  <div class="top">     <div class="arrow"></div>     <ul>         <li><a href="#one">one</a></li>         <li><a href="#two">two</a></li>         <li><a href="#three">three</a></li>     </ul> </div> 

css

.top {     background: #eee;        position:relative;     overflow: hidden;   } .arrow {     border-bottom: 1px solid #c2c2c2;     height: 50px;  } .arrow:before {     content: '';     display: block;     width: 14px;     height: 14px;     border: 1px solid #c2c2c2;     border-radius: 3px;     position:absolute;     bottom:-9px;     left: 30px;     background: #fff;     -webkit-transform: rotate(45deg);     -moz-transform: rotate(45deg);     -ms-transform: rotate(45deg);     -o-transform: rotate(45deg);      transform: rotate(45deg);      -webkit-transition: left, 0.5s;     -moz-transition: left, 0.5s;     -o-transition: left, 0.5s;     transition: left, 0.5s; } ul {     position: absolute;     top: 0;     list-style: none;     padding-left: 20px;     margin-top: 15px; } li {     display: inline-block;     text-decoration: none;     font-size: 18px;     color: #676767;     margin-right: 40px; } .page {     width: 100%;     height: 200px;     position: absolute;     top: 80px;     opacity: 0;     background: yellow;     -webkit-transition: opacity, 0.5s;     -moz-transition: opacity, 0.5s;     -o-transition: opacity, 0.5s;     transition: opacity, 0.5s; } .page:target {     opacity: 1; }  #two {     background: pink; } #three {     background: brown; } #one:target ~ .top .arrow:before {     left: 30px; } #two:target ~ .top .arrow:before {     left: 105px; } #three:target ~ .top .arrow:before {     left: 189px; }