Html 如何将 :before & :after 伪元素置于彼此之上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19415641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position :before & :after pseudo-elements on top of each other?
提问by Ila
What's the best way to position one pseudo-element directly on top of another pseudo-element?
将一个伪元素直接放置在另一个伪元素之上的最佳方法是什么？
Let's say I want to make a fancy "checkbox" appear next to label here:
假设我想在标签旁边显示一个花哨的“复选框”：
label:before {
content: "<input id="pretty"><label for="pretty">Label text</label>
a0";
color: #FFF;
height: 6px;
width: 6px;
display: inline-block;
}
label:after {
content: "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%);
}
a0";
height: 18px;
width: 18px;
display: inline-block;
background: #ebd196;
background-image: linear-gradient(top, #ebd196 4%, #e2b65d 5%, #ab8844 100%);
}label {}
label::before{vertical-align: middle;}
label::after {vertical-align: middle;}
What is the stacking order of the pseudo-elements? Does :before appear below or above :after- which is better suited to be the border, and which the fill?
伪元素的堆叠顺序是什么？:before 出现在下面还是上面 :after- 哪个更适合作为边框，哪个更适合填充？
And what is the best positioning to apply to label, label:before & label:after to get the proper positioning?
应用于标签的最佳定位是什么，标签：之前和标签：之后以获得正确的定位？
回答by Ben Hymanson
: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, :afterwould naturally cover :before.
: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/::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
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 labeland position: absolute;on the pseudo-elements along with the same values for top, bottometc.
我想确保它们对齐的最佳方法是在伪元素position: relative;上label和position: absolute;伪元素上使用相同的值top，bottom等等。
If you wanted to make a gradient border using pseudo-elements then you could do something like this:
如果您想使用伪元素制作渐变边框，则可以执行以下操作：
##代码##You might find this useful:
您可能会发现这很有用：
回答by Cihangir
Rather than position, add "vertical-align: middle" to :after and :before.
而不是位置，将“vertical-align: middle”添加到 :after 和 :before 。
##代码##