Comment d'assemblage :avant & :après les pseudo-éléments les uns au dessus des autres?
Quelle est la meilleure façon de positionner un pseudo-élément directement sur le dessus de l'autre pseudo-élément?
Disons que je veux faire une fantaisie "case à cocher" apparaît à côté de l'étiquette ici:
CSS:
label:before {
content: "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%);
}
a0";
color: #FFF;
height: 6px;
width: 6px;
display: inline-block;
}
label:after {
content: "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%);
}
a0";
height: 18px;
width: 18px;
display: inline-block;
background: #ebd196;
background-image: linear-gradient(top, #ebd196 4%, #e2b65d 5%, #ab8844 100%);
}
HTML:
<input id="pretty"><label for="pretty">Label text</label>
Ce qui est de l'ordre de superposition des pseudo-éléments? N' :avant d'apparaître au-dessous ou au-dessus :après - ce qui est mieux adapté à la frontière, et dont le remplissage?
Et quel est le meilleur positionnement possible d'appliquer l'étiquette, étiquette:avant & label:après pour avoir le bon positionnement?
Vous devez vous connecter pour publier un commentaire.
:before
(ou::before
) est considéré comme le premier enfant de l'élément qu'il est appliqué, alors que:after
(ou::after
) est traitée comme la dernière des enfants. Par conséquent,:after
, naturellement, de couvrir:before
.https://developer.mozilla.org/en-US/docs/Web/CSS/::before
https://developer.mozilla.org/en-US/docs/Web/CSS/::after
J'imagine que la meilleure façon de vous assurer qu'ligne serait d'utiliser
position: relative;
surlabel
etposition: absolute;
sur les pseudo-éléments avec les mêmes valeurs pourtop
,bottom
etc.Si vous vouliez faire un dégradé à la frontière à l'aide de pseudo-éléments, alors vous pourriez faire quelque chose comme ceci:
http://jsfiddle.net/QqzJg/
Vous pourriez trouver cela utile:
http://css-tricks.com/examples/GradientBorder/
Plutôt que de la position, ajouter "vertical-align: middle" à :after et :before.