如何定位：之前和之後：僞元素在彼此之上？

Question

將一個僞元素直接放在另一個僞元素之上的最好方法是什麼？

比方說，我想打一個奇特的「勾選」顯示在旁邊標註的位置：

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

我可能想用一個梯度一個僞元素，而另一個與定位在頂部，一個普通的盒子模擬「漸變邊界」效果。

我可以去讓兩個盒子：

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

什麼是僞元素的堆疊順序？是否：之前出現在下面或上面：之後 - 哪個更適合做邊界，哪些是填充？

什麼是最好的定位適用於標籤，標籤：之前&標籤：獲得適當的定位後？

Answer 1

:before（或::before）被處理，因爲它是被施加到元件的第一子，同時:after（或::after）作爲最後一個子進行處理。因此，:after自然會覆蓋:before。

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

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

我想象的最好的方式，以確保他們排隊是就與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/