Come posizionare: prima e: dopo pseudo-elementi uno sopra l'altro?

Question

Qual è il modo migliore per posizionare uno pseudo-elemento direttamente sopra un altro pseudo-elemento?

Diciamo che voglio fare una "casella di controllo" fantasia apparire accanto ad etichettare qui:

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

potrei desiderare uno pseudo-elemento con un gradiente, e un altro con una scatola di pianura posizionato sopra la parte superiore per simulare un effetto "bordo sfumato".

posso fare due scatole andando:

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

Qual è l'ordine di sovrapposizione degli pseudo-elementi? Fa: prima di apparire sotto o sopra: dopo- quale è più adatto per essere il bordo e quale il riempimento?

E qual è il miglior posizionamento da applicare all'etichetta, etichetta: prima dell'etichetta &: dopo aver ottenuto il posizionamento corretto?

Answer 1

:before (o ::before) viene trattata come primo figlio dell'elemento viene applicato a, mentre :after (o ::after) viene trattata come ultimo figlio. Pertanto, coprirà naturalmente :before.

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

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

immagino il modo migliore per assicurarsi che siano allineati sarebbe quella di utilizzare position: relative; su label e position: absolute; sugli pseudo-elementi lungo con gli stessi valori per top, bottom etc.

Se si desidera creare un bordo sfumato utilizzando gli pseudo-elementi, è possibile fare qualcosa del tipo:

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/

Si potrebbe rivelarsi utile:

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