css - CSS3: :after および :before 要素を要素の高さに合わせて配置する

Question

ヘッダー設計で大きなヘッドキャッシュを持っています:

ここでデモ: http://jsfiddle.net/uGECm/

アイデアは、要素を「ラップ」する灰色のラベルを持つことです。ただし、ラベルの高さは不明です（内容によって異なる場合があります）-私の問題は、ラベルのサイズが変更されると、三角形のように作成された2つの疑似要素が間違った位置になることです。これは、位置が相対的であるためです。

何か案が？

ps: js も画像も使用しないソリューションを探しています。

Answer 1

section h2:before, section h2:after {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    bottom: 0;
    margin: 0 0 -10px 0;
}

section h2:before {
    content: '\0000a0';
    border-left: 10px solid transparent;
    border-top: 10px solid #323232;
}

section h2:after {
    content: '\0000a0';
    border-right: 10px solid transparent;
    border-top: 10px solid #323232;
    right: 0;
}​

これは、さらにいくつかの CSS フォーマットを含むフォークです: http://jsfiddle.net/bqXeJ/

私がここに書いたようなスタイル ガイドを参照することは価値があります。また、Lea Verou のprefixfree.jsを使用すると、各ブラウザー ベンダーの宣言を書くことをスキップできます。

Answer 2

• :before と :after には相対位置ではなく絶対位置を使用する
• bottom:-10px;両方に適用
• left:0;およびをそれぞれ適用しright:0;ます。
• フロートを取り外します。フローティングは、絶対位置を持つ要素には影響しません。

jsfiddle デモを更新しました。

section h2:before,
section h2:after {
    content: '\0000a0';
    width: 0;
    height: 0;
    position: absolute;    
    bottom: -10px;
    display: block;
}
section h2:before {
    border-left: 10px solid transparent;
    border-top: 10px solid #323232;
    left: 0;
}
section h2:after {
    border-right: 10px solid transparent;
    border-top: 10px solid #323232;
    right: 0;
}

Answer 3

疑似要素を絶対に配置できます。section h2isであるためposition: relative、それらを に設定するtop: 100%と、親のサイズに関係なく、下部に固定されたままになります。

section h2:before, section h2:after {
  position: absolute;
  top: 100%;
}