web-dev-qa-db-fra.com

Comment positionner: avant et: après les pseudo-éléments les uns sur les autres?

Quelle est la meilleure façon de positionner un pseudo-élément directement par-dessus un autre pseudo-élément?

Disons que je veux faire une "case à cocher" élégante à côté de l'étiquette ici:

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>

Quel est l'ordre d'empilement des pseudo-éléments? Est-ce que: avant apparaît en dessous ou au-dessus: après- lequel convient le mieux pour être la bordure et lequel le remplissage?

Et quel est le meilleur positionnement à appliquer sur une étiquette, étiquette: avant et étiquette: après pour obtenir le bon positionnement?

htmlcsscss3pseudo-element
15
Ila

:before (ou ::before) est traité comme le premier enfant de l'élément auquel il est appliqué, alors que :after (ou ::after) est traité comme le dernier enfant. Par conséquent, :after couvrirait naturellement :before.

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

J'imagine que le meilleur moyen de s'assurer qu'ils s'aligneraient serait d'utiliser position: relative; sur label et position: absolute; sur les pseudo-éléments avec les mêmes valeurs que top, bottom etc.

Si vous voulez créer une bordure de dégradé en utilisant des pseudo-éléments, vous pouvez faire quelque chose comme ceci:

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/

Vous pourriez trouver cela utile:

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

22
Ben Jackson

Plutôt que de positionner, ajoutez "vertical-align: middle" à: after et: before.

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