Pouvez-vous appliquer une largeur d'un :avant:après le pseudo-élément (contenu:url(image))?

C'est en plus de mon récent question:
Est-il possible d'utiliser des pseudo-éléments contenant des éléments enrouler autour d'un positionnement absolu de l'élément (comme un clearfix)?

JSFiddle: http://jsfiddle.net/derekmx271/T7A7M/

Je suis en train d'utiliser les pseudo-éléments pour la "clearfix" position absolue des images. J'ai été aussi loin que d'obtenir la même image à afficher derrière les diapositives, mais ne semblent pas pouvoir s'appliquer à une largeur de l'image à insérer. Suis-je fou, ou peut-on PAS appliquer à une largeur de pseudo-éléments dont le contenu est content: url(img/image.jpg)? J'ai essayé différentes variations de display:block, etc. en vain...

#slider ul:after {
  content: url(http://www.cs7tutorials.com/img/slide1.jpg);
  display: block;
  position:relative;
  width:70px;
}

J'ai besoin de régler la largeur de la pseudo-élément de l'image à 100% et le maximum de la largeur de 800px, de sorte qu'il a les mêmes dimensions que mes diapositives.

Pourquoi n'appelez-vous pas votre image d'arrière-plan dans le pseudo conteneur? De cette façon, vous pouvez contrôler ses dimensions à l'aide de background-size:100% et votre pseudo conteneur à width:100%; max-width:800px.
Je vais essayer d'. Où serait le pseudo conteneur obtenir ses dimensions? @otinanai
J'ai besoin de la pseudo-élément à conserver les mêmes dimensions que les diapositives qu'il est placé à l'arrière 🙁
Le conteneur s'est effondré...

OriginalL'auteur derekmx271 | 2013-02-20

  1. 25

    Vous n'êtes pas fou: il n'est en effet pas possible de modifier les dimensions d'une image qui est inséré à l'aide de content. L'image est toujours rendu comme est. Ceci est connu comme remplacé le contenu, ou une remplacé élément (sauf que nous ne parlons pas des éléments ici).

    Cependant, depuis remplacé éléments peut être redimensionnée à l'aide de width et height comme décrit dans l'article 10 de la CSS2.1 spec, ce qui soulève la question de savoir pourquoi les propriétés ne semble pas s'appliquer ici. La réponse à cette question, il semble, est que les propriétés ne s'appliquent pas, mais à la pseudo-élément de la boîte de au lieu de cela, vous pouvez voir cela en donnant votre pseudo-élément, une couleur d'arrière-plan. Plutôt que de remplacer le pseudo-élément de la boîte de lui-même, le rendu de l'image en tant que enfant de la pseudo-élément de la boîte, et ne peut donc pas être de style à tous (car il faudrait un autre pseudo-élément qui n'existe pas).

    Et qui se prête à une autre question: pourquoi ne pas remplacer le pseudo-élément de la boîte de tout? Malheureusement, CSS2.1 ne précise pas ce comportement à tous, donc la mise en œuvre qui a été convenu est de rendre le contenu comme un enfant de la pseudo-élément de la boîte au lieu:

    CSS2.1 n'a pas vraiment définir clairement le modèle de traitement de 'contenu':: before et ::after, mais le contenu informatif des exemples dans CSS 2.1, le fait que "le contenu" spécifie un liste de choses, et la volonté de cohérence a conduit à UA comportement sont les suivants: la propriété 'content' spécifie une liste de choses que deviennent les enfants de l' ::before ou ::après la boîte.

    -Boris

    J'espère que ce sera abordée plus en détail dans le CSS Généré Contenu de niveau 3, dont la réécriture de travail vient de commencer.

    En attendant, si vous voulez être en mesure de redimensionner la :after pseudo-élément et l'image qui est généré, vous devrez l'appliquer comme une image de fond à la place, et, en supposant prise en charge du navigateur n'est pas un problème — utilisation background-size avec width et height de l'échelle (basée sur la compréhension que ces propriétés s'appliquent à la pseudo-élément de la boîte de la place).

    Ne savez-vous pas, par hasard, si cette restriction est documenté nulle part? Je ne pouvais pas le trouver ici
    Non, je ne pouvais pas le trouver. C'est ça le problème. J'ai une explication possible, mais je pense que je vais le proposer à www-style et voir si j'ai raison et si oui, je vais mettre à jour ma réponse.
    Ok, je vous remercie pour votre attention
    Meilleure réponse sur le sujet!

    OriginalL'auteur BoltClock

  2. 0

    Ont un coup d'oeil à la démo à l'aide de background-image: http://jsfiddle.net/T7A7M/12/

    Cependant, il semble que vous devez avoir une hauteur spécifique pour votre pseudo élément.
    Il a certainement réduit l'affichage de l'image, mais il a perdu la capacité de pousser les éléments vers le bas... je pense que je suis juste la tête dans les étoiles ici pour une solution à l'absolu placé dilemme.
    Si vous définissez un height pour le pseudo-élément, il va pousser l'autre élément vers le bas.

    OriginalL'auteur otinanai