Können Sie eine Breite auf ein: vor /: nach Pseudo-Element (Inhalt: URL (Bild)) anwenden?

Question

Dies ist zusätzlich zu meiner letzten Frage: Is it possible to use pseudo-elements to make containing elements wrap around an absolutely-positioned element (like a clearfix)?

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

Ich versuche Pseudo-Elemente zu verwenden, um "clearfix" absolut positionierte Bilder. Ich bin so weit gekommen, das gleiche Bild hinter den Dias zu sehen, aber es scheint nicht möglich zu sein, Breiten auf das eingefügte Bild anzuwenden. Bin ich verrückt, oder können Sie Breiten nicht auf Pseudoelemente anwenden, deren Inhalt Inhalt ist: url (img/image.jpg)? I versucht, verschiedene Varianten der Anzeige: Block usw. ohne Erfolg ...

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

I die Breite des Pseudoelement Bild auf 100% und der Max-Breite zu 800 Pixel festlegen müssen, so dass es hat die gleichen Abmessungen wie meine Folien.

Answer 1

Sie nicht verrückt sind: es in der Tat nicht möglich ist, die Abmessungen eines Bildes zu ändern, die content eingefügt verwendet. Das Bild wird immer so dargestellt, wie es ist. Dies ist bekannt als ersetzter Inhalt oder eine replaced element (außer wir reden hier nicht über Elemente).

seit ersetzte Elemente jedoch könnenwidth und height, wie in section 10 of the CSS2.1 spec beschrieben geändert werden, stellt sich die Frage, warum die Eigenschaften scheinen nicht hier anzuwenden. Die Antwort darauf, so scheint es, ist, dass die Eigenschaften zutreffen, aber stattdessen auf die Pseudo-Element-Box - Sie können dies sehen, indem Sie Ihrem Pseudo-Element eine Hintergrundfarbe geben. Anstatt die Pseudo-Element-Box selbst zu ersetzen, wird das Bild als Kind der Pseudo-Element-Box gerendert und kann daher überhaupt nicht formatiert werden (da es ein anderes Pseudo-Element erfordern würde, das nicht existiert).

Und das ergibt sich zu einer anderen Frage: Warum ersetzt es nicht die Pseudo-Element-Box insgesamt? Leider hat angeben CSS2.1 überhaupt nicht dieses Verhalten, so the implementation that was agreed on is to render the content as a child of the pseudo-element box instead:

CSS2.1 nicht wirklich klar die Verarbeitung Modell des ‚Inhalts‘ definiert auf :: vor und :: nach, aber die informative Beispiele in CSS 2.1, die Tatsache, dass "content" eine Liste von Dingen angibt, und der Wunsch nach Konsistenz hat dazu geführt, dass UA-Verhalten das Folgende ist: Die 'content'-Eigenschaft gibt eine Liste von Dingen an, die Kinder der :: vor oder :: nach der Box.

-Boris

Hoffentlich wird dies weiter in CSS Generierte Inhalte Ebene 3 adressiert werden, auf dem Umschreiben Arbeit gerade erst begonnen hat. Wenn Sie in der Zwischenzeit die Größe des Pseudoelements :after und das generierte Bild ändern möchten, müssen Sie es stattdessen als Hintergrundbild anwenden und - vorausgesetzt, die Browserunterstützung ist kein Problem - verwenden background-size zusammen mit width und height skalieren (basierend auf der Erkenntnis, dass diese Eigenschaften stattdessen auf die Pseudo-Element-Box angewendet werden).

Answer 2

Werfen Sie einen Blick auf die Demo mit background-image: http://jsfiddle.net/T7A7M/12/