jquery - 下部の Jquery UI タブ、アクティブなタブの矢印を揃えることができません

Question

この2日間ずっと頭を悩ませようとしている

これは私のフィドルです http://jsfiddle.net/wd7a6/

アクティブなタブに矢印を追加しましたが、配置できません

私が間違っていることを教えてください

.ui-state-active a::before {
    content: "";
    position: absolute;
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid black;
    top:-20; 
    display:block;
}

うまく説明できなくてすみません スクリーンショットを見て理解してください

Answer 1

デモ

.ui-state-active a::before {
    content: "";
    position: absolute;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid black;
    top: -5px;//added this
    left: 20px;//added this
    display: block;
}