Question

将一个伪元素直接放在另一个伪元素之上的最佳方法是什么？

假设我想在标签旁边显示一个奇特的“复选框”：

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

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

伪元素的堆叠顺序是什么？是：在出现在下方或上方之前：之后 - 哪个更适合作为边框，哪个更适合填充？

什么是适用于标签的最佳定位，标签：之前和之后label：之后得到正确的定位？

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

我认为确保排队的最佳方法是在position: relative;和label上使用position: absolute;对伪元素以及{{1}的相同值}，top等。

如果你想使用伪元素制作渐变边框，那么你可以这样做：

bottom

http://jsfiddle.net/QqzJg/

您可能会觉得这很有用：

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

Answer 2

而不是定位，添加＆＃34; vertical-align：middle＆＃34; to：after和：before。

label {}
label::before{vertical-align: middle;}
label::after {vertical-align: middle;}

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

2 个答案: