js控制css伪类after,before

html

<ul class="order_list">
     <li class="link link_postion link_dealer">E淘经销商订单</li>
     <li><a href="#" data-href="#order_all">全部订单</a></li>
      <li ><a href="#">待付款</a></li>
      <li><a href="#">待发货</a></li>
 </ul>

css

.left_sidebar .link_postion{
    position:relative;
}
.left_sidebar .link_postion::before{
    display:block;
    content:"";
    width:0;
    height:0;
    border-width:0 8px 8px;
    border-style:solid;
    border-color:transparent transparent #999;
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    -ms-transform:translateY(-50%); /* IE 9 */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
}
.left_sidebar .link_postion.up_link::before{
    display:block;
    content:"";
    width:0;
    height:0;
    border-width:8px 8px 0;
    border-style:solid;
    border-color:#999 transparent transparent;
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    -ms-transform:translateY(-50%); /* IE 9 */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
}
.left_sidebar .link_postion.hover_tips::after{
    display:block;
    content:attr(data-content);
    width:305px;
    height:56px;
    line-height:56px;
    text-align:center;
    background:url(../images/hover_tips.png) right center no-repeat;
    position:absolute;
    top:50%;
    right:-303px;
    transform:translateY(-50%);
    -ms-transform:translateY(-50%); /* IE 9 */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
}

js

//导航栏折叠
    $(".link").bind("click", function () {
          $(this).siblings("li").slideToggle(400);
          $(this).parent().siblings("ul.order_list").children("li").not(":first").slideToggle(400);
          $(this).toggleClass("up_link");
     });
     //E淘经销商订单hover
    $(".link_dealer").hover(function () {
          $(this).addClass("hover_tips").attr('data-content', 'E淘经销商订单：E淘APP的订单');
        }, function () {
          $(this).removeClass("hover_tips");
    });