Wann kann CSS :after keinen Inhalt nach einem Element hinzufügen?

Verstehen der Einschränkungen von CSS :after für bestimmte Elemente

Das CSS :after-Pseudoelement wird verwendet, um Inhalte nach dem Dokument eines Elements hinzuzufügen Bauminhalt. Obwohl die CSS-Spezifikation keine expliziten Einschränkungen angibt, wurde beobachtet, dass :after nur mit bestimmten Elementen funktioniert.

Bestimmen der Elementkompatibilität

Der entscheidende Faktor, der bestimmt Ob ein Element eine :after-Eigenschaft akzeptieren kann, hängt davon ab, ob es sich um ein ersetztes Element handelt. Ersetzte Elemente wie Bilder () und Formulareingaben () werden in ihrem Erscheinungsbild und ihren Abmessungen durch externe Ressourcen definiert.

In der CSS-Spezifikation heißt es ausdrücklich, dass nur :before und :after gilt mit nicht ersetzten Elementen arbeiten. Das bedeutet, dass ersetzte Elemente wie:

• 

kann nicht haben: nachdem ihnen Inhalte hinzugefügt wurden.

Begründung dahinter Einschränkung

Die Inkompatibilität ergibt sich aus der Tatsache, dass ersetzte Elemente nicht als Teil des Dokumentbaums gerendert werden. Stattdessen werden sie als externe Objekte gerendert, sodass der Browser keinen zusätzlichen Inhalt davor oder danach einfügen kann.

Beispiel einer DOM-Struktur

Für nicht Durch -ersetzte Elemente wie divs oder spans können :before- und :after-Inhalte in die DOM-Struktur eingefügt werden. Zum Beispiel:

<span></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><before>Before Content</before>
Span Content
<after>After Content</after>

Nach dem Login kopieren

Fazit

Die Die CSS-Eigenschaft :after ist aufgrund der inhärenten Eigenschaften ersetzter Elemente auf nicht ersetzte Elemente beschränkt. Dadurch wird sichergestellt, dass der gerenderte Inhalt auf der Seite konsistent ist und den angegebenen CSS-Regeln entspricht.

Das obige ist der detaillierte Inhalt vonWann kann CSS :after keinen Inhalt nach einem Element hinzufügen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!