如何定位：之前和之后：伪元素在彼此之上？

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/