どのように配置するか：お互いの上に擬似要素の後に＆：の後ろに？

Question

擬似要素を別の擬似要素の上に直接配置する最適な方法は何ですか？

のは、ここでラベルの横に表示され、私は空想「チェックボックス」を作りたいとしましょう：私は勾配を有する1擬似要素をしたい、とにトップの上に配置無地ボックスで別のかもしれません

<input id="pretty"><label for="pretty">Label text</label> 

"グラデーションボーダー"エフェクトをシミュレートします。

私が行くことによって、2つのボックスを行うことができます。

label:before { 
content: "\00a0"; 
color: #FFF; 
height: 6px; 
width: 6px; 
display: inline-block; 
} 

label:after { 
content: "\00a0"; 
height: 18px; 
width: 18px; 
display: inline-block; 
background:#ebd196; 
background-image: linear-gradient(top, #ebd196 4%, #e2b65d 5%, #ab8844 100%); 
} 

擬似要素の積層順は何ですか？次のようにします：前または下に表示される前：後で - 境界線に適していますか？

ラベルに適用するのに最適な位置は何ですか：&の前にラベル：適切な配置を取得する前に？ :after（又は::after）は最後の子として扱われる一方

Answer 1

:before（又は::before）は、それが適用されている要素の最初の子として扱われます。したがって、:afterは当然:beforeをカバーします。

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

は、私は彼らが top、 bottomなどのために同じ値とともに擬似要素に labelと position: absolute;に position: relative;を用いることであろうラインアップを確認するために最善の方法を想像します

疑似要素を使用してグラデーション境界線を作成する場合は、次のようにすることができます。

label { 
    position: relative; 
    display: inline-block; 
    padding: 0 2px; 
    margin: 2px; 
} 

label:before { 
    content:""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background: white; 
} 

label:after { 
    content:""; 
    position: absolute; 
    top: -2px; 
    bottom: -2px; 
    left: -2px; 
    right: -2px; 
    z-index: -2; 
    background: linear-gradient(to bottom, #1e5799 13%, #efe22f 79%); 
} 

http://jsfiddle.net/QqzJg/

あなたは、これは便利かもしれません：

http://css-tricks.com/examples/GradientBorder/