:before
(or ::before
) is treated as the first child of the element it is being applied to, whilst :after
(or ::after
) is treated as the last child. Therefore, :after
would naturally cover :before
.
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
I imagine the best way to make sure they line up would be to use position: relative;
on label
and position: absolute;
on the pseudo-elements along with the same values for top
, bottom
etc.
If you wanted to make a gradient border using pseudo-elements then you could do something like this:
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/
You might find this useful:
http://css-tricks.com/examples/GradientBorder/