Wie positioniert man: vor &: nach Pseudo-Elementen übereinander?

Question

Was ist der beste Weg, um ein Pseudo-Element direkt auf ein anderes Pseudo-Element zu positionieren?

Lassen Sie sich sagen, dass ich ein fancy „Checkbox“ machen will, erscheinen neben hier beschriften:

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

Ich könnte mit einem Gradienten eines Pseudoelement werden soll, und eine andere mit einer einfachen Box über die Oberseite positionierte simulieren Sie einen "Gradientenrand" -Effekt.

kann ich zwei Kisten machen, indem Sie:

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%); 
} 

Was ist die Stapelreihenfolge der Pseudo-Elemente? Trifft: vor oder darunter erscheinen: nach- welcher ist besser geeignet, um die Grenze zu sein, und welche die Füllung?

Und was ist die beste Positionierung auf dem Etikett, Etikett: vor & Etikett: nach, um die richtige Positionierung zu bekommen?

Answer 1

:before (oder ::before) als das erste Kind des Elements behandelt es angelegt wird, während :after (oder ::after) als das letzte Kind behandelt wird. Daher würde :after natürlich :before abdecken.

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

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

Ich stelle mir die beste Art und Weise, dass sie sein würde, um in einer Reihe aufstellen position: relative; auf label und position: absolute; auf den Pseudo-Elemente zu verwenden, zusammen mit den gleichen Werten für top, bottom usw.

Wenn Sie mit Hilfe von Pseudo-Elementen einen Gradientenrahmen erstellen wollten, könnten Sie etwas tun:

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/

Sie könnten dies nützlich finden:

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