Pouvez le :before et :after pseudo-éléments héritent de la hauteur de l'élément parent?

Je me demande si le :before et :after pseudo-éléments peuvent hériter de la hauteur du parent à l'aide de la inherit valeur, sans l'élément le faire?

OriginalL'auteur AKG | 2012-08-25

  1. 24

    Pas. La seule façon que les pseudo-éléments peuvent hériter des valeurs de la mère de leur élément générateur de est lorsque l'élément qui génère lui-même est également hériter de son parent.

    C'est parce que l'héritage se produit à partir d'un parent à un enfant, à un niveau à la fois. Pour l'héritage de travailler sur plusieurs niveaux de descendants, chaque descendant doit hériter.

    Considérez, par exemple, le code HTML suivant:

    <div class="parent">
    <div class="child">
    </div>
</div>

    Avec le code CSS suivant:

    .parent {
    width: 100px;
    height: 100px;
}

.parent > .child:before, .parent > .child:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
}

    Cela ne fonctionnera pas, car même si les pseudo-éléments ont des valeurs de inherit, l'élément générateur, qui est, .parent > .child, n'hérite pas de .parent. Au lieu de cela, ils héritent de la valeur par défaut de auto pour les deux propriétés.

    Pour que cela fonctionne, vous aurez besoin d'avoir .parent > .child héritent ainsi:

    .parent {
    width: 100px;
    height: 100px;
}

.parent > .child {
    width: inherit;
    height: inherit;
}

.parent > .child:before, .parent > .child:after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
}

    OriginalL'auteur BoltClock

  2. 10

    Je sais que cette question est assez vieux, mais je suis tombé sur elle aujourd'hui. Selon http://www.w3.org/TR/CSS21/generate.html, l'on a accepté la réponse n'est pas exacte:

    La :before et :après les pseudo-éléments héritent d'aucun successible, les propriétés de l'élément dans l'arborescence du document à laquelle ils sont attachés.

    J'ai juste essayé d'hériter de largeur et cela a fonctionné.

    Je vais modifier ma réponse à préciser. Je pense que c'était trop court, et par conséquent, il pourrait avoir été source de confusion.
    Quand j'ai posé la question, je ne comprends pas comment les ::before et ::after éléments pseudo travaillé. Prenez cette situation: divA > divB::after - le but de ma question était de savoir si divB:after could inherit divA's properties. In my phrasing of the question: _parent element_ referred to divA " et élément visée à divB. J'espère que ma question a été interprétée de cette manière.
    merci @BoltClock, c'est beaucoup plus clair maintenant. AKG, je pense que votre question était à l'origine bien compris, mais tout est plus claire maintenant de toute façon 🙂

    OriginalL'auteur joe

  3. 2

    Concernant ces réponses, je viens de heurter l'aspect de la transformation. Il peut ressembler à de l'héritage; j'espère que cela aide quelqu'un.

    Avoir ceci:

    <div class="box">    
  <div class="frame"></div>
</div>

    et cette transformation pour frame:

    transform: rotate(10deg);

    Puis le frame:before et frame:after sont également transformées. Pourtant, ils n'ont pas les propriétés de frame, comme width et height, qui est, comme expliqué ci-dessus. Exemple complet voir ici:

    http://jsfiddle.net/chafpgwt/1/

    Sur ce violon, il y a trois carrés imbriqués, chaque rotation de 10°, mais la transformation de la définition est uniquement définie pour le frame, pas pour frame:after ni frame:before.

    C'est un piège de penser les transformations ne sont pas "hérité", comme tout le reste est ni. La transformation a de l'influence dans un autre contexte.

    OriginalL'auteur peter_the_oak