位置拘束なしの擬似要素 "キャレット"のセンタリング

Question

私はいくつかのメニュー項目でホバーステートに使用している小さなキャレットがあります。ホバリングはちょっとしたキャレットを追加するために疑似要素を追加するmenu-caretと呼ばれる小さなクラスを追加するだけです。

carretためのCSSは、ちょうどそうのようになります。

.menu-caret::before { 
    content:""; 
    position: absolute; 
    margin-left: 20px; 
    bottom: 0; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

私は、私はメニュー項目（各キャレットを中央したいと思いますが午前問題は、サイズ/幅でダイナミックですが、また維持私はここの場所。ここ

で持っているホバーサブメニューの整合性（キャレットの修正なし）IAフル実施例である - 私はこのような何かを行うことができます知っているhttp://codepen.io/ajmajma/pen/KgGxWL

：

は、

ul { 
    width: 100%; 
    position: relative; 
    display: inline-block; 
    list-style-type: none; 
} 
li { 
    padding: 20px; 
    float: left; 
    position: relative; 
} 
.menu-caret::before { 
    content: ""; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
    width: 0%; 
    margin-left: -5px; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 

しかし、相対位置を追加すると、サブメニューのサイズ（ページ幅は100％にする必要があります）が混乱します。私のサブメニューを邪魔することなく、中心のキャレットを持つ方法はありますか？

Answer 1

キャレットを作成する相対コンテナを変更することができます。例えばaタグに移動：

.menu-caret > a::after { 
    content:""; 
    position: absolute; 
    left:50%; 
    margin-left: -5px; 
    bottom: -10px; 
    width: 0%; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-bottom: 5px solid black; 
} 
.menu > ul > li a { 
    position: relative; 
} 

CodepenDemo