三角を文字の上下につける

.triangle-top_0:before {
content: "";
display: block;
width: 0;
height: 0;
border-bottom: 4px solid #333;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}

#triangle-bottom_0:after {

content: "";
display: block;
width: 0;
height: 0;
border-top: 4px solid #333;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}

.triangle-top_1:before {
content: "";
display: block;
width: 0;
height: 0;
border-bottom: 4px solid #ccf;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}

#triangle-bottom_1:after {

content: "";
display: block;
width: 0;
height: 0;
border-top: 4px solid #ccf;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
}

$("div#food_table").on("click","th",function(event){

if(val2=="triangle-top_0"){

val2=$(this).find("div").attr({class: "triangle-top_1"})
val2=$(this).find("div").attr({id: "triangle-bottom_0"})
sort_order="asc"

}else{

val2=$(this).find("div").attr({class: "triangle-top_0"})
val2=$(this).find("div").attr({id: "triangle-bottom_1"})
//alert("test")
sort_order="desc"

}

}