親要素の幅に基づいてa：after擬似要素の境界線幅を設定する

Question

まず、擬似要素aren't part of the DOMを実現するため、jQueryをターゲットにすることはできません。私はおそらく：after擬似要素（この場合border-width）のプロパティを親要素の幅に依存させる別の方法（純粋なCSSまたはjQueryの創造的な使い方）があるのだろうかと思います。

私はthis articleに記載された技術を使用して、ナビゲーションメニューをスタイリングんだけど、三角形状の部分は、ナビゲーション要素の全幅ことがしたい：

しかし、ナビゲーション要素をすべて同じまたは常に同じ幅ではないので、親要素の幅に基づいて境界幅を設定する必要があります。どのようにこれを達成するための任意の提案？

編集：jsfiddleデモを追加しました：http://jsfiddle.net/bcAQc/1/

注：何らかの理由で、私はちょうど異なる値トップ用と左の上に持っていた：私のサイト上でよりjsfiddleで擬似要素の後。私のサイトでは、上のリンク先の記事の例では、topは100％に設定され、leftは50％に設定されています。 CSSは、パーセント値は、（このような状況では理想的であるもの）の境界線幅を生成することはできませんので

Answer 1

私は彼が言うときScottは、右のお金であると思う：

CSSは、このような状況では理想的であろう（パーセント値は、境界線の幅を生成することはできません

あなたが持っているので。あなたはjqueryソリューションにオープンしていると仮定していますか？境界/三角形トリックを使用して、CSSでこれを行うことは不可能かもしれません。もちろん、JavaScriptはこれを開くには最大限の解決策ですが、ここにある：

デモ：http://jsfiddle.net/bcAQc/2/

$('a').each(function(){ 
    var self = $(this), 
     width = (self.width()/2) + 10; // +10 for <a> padding 
    self.append('<span class="triangle" />'); 
    $('.triangle', self).css({ 
     'border-left-width' : width, 
     'border-right-width' : width 
    }); 
}); 

.triangle { 
    position: absolute; 
    border: 40px solid transparent; 
    border-top-color: blue; 
    display:block; 
    top:20px; 
    left: 0; 
} 

これはあなたがやりたいようだが、私はthe demoで異なる角度が、それは一種の醜い見えるように見つけます。それが私だったら、固定幅のリスト項目を考えてみましょう：CSSとIMOを使ってこれを完全に可能にすると、もっと良く見えます。

Answer 2

、私はあなたの唯一の解決策は、動的に（jQueryの経由head要素へstyleタグを追加）CSSルールを記述することであると思います実行時にnavタグの幅に基づいて三角形の幅と高さを作成します。

三角形を同じ高さにすることを想定しています。つまり、最も広い三角形に必要な高さに合わせる必要があります。以下のように、実際の/擬似コードの組み合わせ（CSSルールを構築する他の方法もありますが）は、ナビゲーションの各要素にクラスを設定する必要があります（これはli要素が設定されているものとします）position: relativeへ：Create a CSS rule/class with jQuery at runtime、およびルール作成をもたらすために他の方法があります。このルールの書き込みはこの質問への答えをオフに基づいていたことを

$("<style type='text/css'> 
#Nav li:after { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    border-style: solid; 
    border-color: transparent; 
    border-top-color: blue; /* your desired color of the triangle */ 
    border-width: ??px; /* set this to the calculated value of your desired standard height; I believe it should be at least 25% of the width of the widest nav element */ 
} 

#Nav li.yourNavElement1Class:after { 
    border-left-width: ??px; /* 50% of NavElement1 width */ 
    border-right-width: ??px; /* 50% of NavElement1 width */ 
} 

#Nav li.yourNavElement2Class:after { 
    border-left-width: ??px; /* 50% of NavElement2 width */ 
    border-right-width: ??px; /* 50% of NavElement2 width */ 
} 

#Nav li.yourNavElementEtcClass:after { 
    border-left-width: ??px; /* 50% of NavElementEtc width */ 
    border-right-width: ??px; /* 50% of NavElementEtc width */ 
} 
</style>").appendTo("head"); 

注意。