27

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

假设我想在这里的标签旁边出现一个花哨的“复选框”：

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>

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

什么是应用于标签的最佳定位，标签：之前和标签：之后以获得正确的定位？

4

2 回答 2

35

:before(or ::before) 被视为正在应用的元素的第一个子元素，而:after(or ::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;topbottom

如果您想使用伪元素制作渐变边框，那么您可以执行以下操作：

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/

于 2013-10-16T23:29:59.140 回答
1

在 :after 和 :before 中添加“vertical-align: middle”而不是位置。

label {}
label::before{vertical-align: middle;}
label::after {vertical-align: middle;}
于 2018-05-29T14:59:36.750 回答