web-dev-qa-db-ja.com

：beforeおよび：after擬似要素を互いの上に配置する方法は？

ある擬似要素を別の擬似要素の上に直接配置する最良の方法は何ですか？

ここでラベルの横に派手な「チェックボックス」を表示したいとしましょう：

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-どちらが境界線に適し、塗りつぶしに適していますか？

そして、適切な位置を取得するために、ラベル、ラベル：前とラベル：後に適用する最適な位置は何ですか？

htmlcsscss3pseudo-element
15
Ila

: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

それらを整列させるための最良の方法は、labelでposition: relative;を使用し、top、bottomなどの同じ値とともに、擬似要素でposition: absolute;を使用することだと思います。

擬似要素を使用してグラデーションの境界線を作成する場合は、次のようなことができます。

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/

23
Ben Jackson

位置ではなく、「vertical-align：middle」を：afterおよび：beforeに追加します。

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