Ich mache eine HTML-E-Mail-Signatur mit Inline-CSS (dh CSS in style
Attributen) und bin gespannt, ob es möglich ist, die :before
und :after
-Elemente zu verwenden.
Wenn ja, wie würde ich so etwas mit Inline-CSS implementieren?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
Antworten:
Sie können keine Inline-Stile für Pseudoelemente angeben.
Dies liegt daran, dass Pseudoelemente wie Pseudoklassen (siehe meine Antwort auf diese andere Frage ) in CSS mithilfe von Selektoren als Abstraktionen des Dokumentbaums definiert werden, die nicht in HTML ausgedrückt werden können.
style
Andererseits wird in HTML für ein bestimmtes Element ein Inline- Attribut angegeben.Da Inline-Stile nur in HTML vorkommen können, gelten sie nur für das HTML-Element, für das sie definiert sind, und nicht für die von ihr generierten Pseudoelemente.
Als Nebenwirkung ist der wesentliche Unterschied zwischen Pseudo-Elemente und Pseudo-Klassen in diesem Aspekt , dass die Eigenschaften, die standardmäßig vererbt wird vererbt werden durch
:before
und:after
aus dem Erzeugungselement, während Pseudoklasse Stile gerade überhaupt nicht gelten. Wenn Sie beispielsweise in Ihrem Falltext-align: justify
ein Inline-Stilattribut für eintd
Element platzieren, wird es von geerbttd:after
. Die Einschränkung ist, dass Sie nichttd:after
mit dem Inline- Stilattribut deklarieren können . Sie müssen dies im Stylesheet tun.quelle
wie oben erwähnt: Es ist nicht möglich, eine CSS-Pseudoklasse / -Element inline aufzurufen. Was ich jetzt getan habe, ist: Geben Sie Ihrem Element eine eindeutige Kennung, z. eine ID oder eine eindeutige Klasse. und schreibe ein passendes
<style>
Elementflüchtig, aber was inline css ist nicht ..?
quelle
scoped
Stile und die:root
Pseudo-Klasse (das ist so cool) :<article><style scoped>:root:before { content: "*";}</style><!-- something --></article>
.:scope
Pseudoklasse:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
scope
d Stile) und CSS-:scope
Spezifikation ( ) . Ich hätte klarer sein sollen.Sie können die Daten inline verwenden
quelle
data-content
Attribut wiecontent
für ein Pseudoelement aus. Es hat nichts mit dem Erstellen von Pseudoelementen mit Inline-CSS zu tun.Nein , Sie kann nicht die Ziel Pseudo-Klassen oder Pseudo-Elemente in der Inline-CSS als David Thomas sagte. Weitere Details finden Sie in dieser Antwort von BoltClock zu Pseudoklassen
Wir können das gleiche auch für die Pseudoelemente schreiben
quelle
Sie können keine Pseudoelemente in Inline-CSS erstellen.
Wenn Sie jedoch ein Pseudoelement in einem Stylesheet erstellen können, gibt es eine Möglichkeit, es inline zu formatieren, indem Sie einen Inline-Stil für das übergeordnete Element festlegen und das Pseudoelement wie folgt mit dem Schlüsselwort erben formatieren:
manchmal kann dies praktisch sein.
quelle
Ja, es ist möglich , fügen Sie einfach Inline-Stile für das Element hinzu, das Sie nach oder vor dem Beispiel hinzufügen
quelle
::after
und::before
Pseudoelemente benötigen diecontent: value
ansonsten standardmäßig verwendeten,content:none
was im Grunde nichts ergibt.Wie bereits erwähnt, können Sie keine Inline-Elemente zum Stylen von Pseudoklassen verwenden . Vor und nach Pseudoklassen sind Zustände von Elementen, keine tatsächlichen Elemente. Sie können hierfür möglicherweise nur JavaScript verwenden.
quelle
Wenn Sie die Kontrolle über den HTML-Code haben, können Sie anstelle eines Pseudo-Elements ein reales Element hinzufügen. : vor und: nach Pseudoelementen werden direkt nach dem offenen Tag oder direkt vor dem geschlossenen Tag gerendert. Das Inline-Äquivalent für dieses CSS
Wäre ungefähr so:
Merken Sie sich; Ihre "echten" Vorher- und Nachher-Elemente und alles mit Inline-CSS erhöhen die Größe Ihrer Seiten erheblich und ignorieren Seitenladeoptimierungen, die externe CSS- und Pseudo-Elemente ermöglichen.
quelle
Sie können verwenden
in css
quelle