Verwenden von CSS: vor und: nach Pseudoelementen mit Inline-CSS?

141

Ich mache eine HTML-E-Mail-Signatur mit Inline-CSS (dh CSS in styleAttributen) und bin gespannt, ob es möglich ist, die :beforeund :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%; }
Bah-Bee
quelle
8
Sie können keine Inline-Stile verwenden, um auf Pseudoklassen oder Pseudoelemente abzuzielen.
David sagt, Monica am
2
wahrscheinlich Duplikat von CSS-Pseudoklassen mit Inline-Stilen
Champ
2
@Champ: Nicht die gleiche Frage, da Pseudoelemente und Pseudoklassen nicht dasselbe sind. Ich habe hier eine eigene Antwort geschrieben, um sie näher zu erläutern.
BoltClock

Antworten:

123

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. styleAndererseits 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 :beforeund :afteraus dem Erzeugungselement, während Pseudoklasse Stile gerade überhaupt nicht gelten. Wenn Sie beispielsweise in Ihrem Fall text-align: justifyein Inline-Stilattribut für ein tdElement platzieren, wird es von geerbt td:after. Die Einschränkung ist, dass Sie nicht td:aftermit dem Inline- Stilattribut deklarieren können . Sie müssen dies im Stylesheet tun.

BoltClock
quelle
37

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>Element

<style>#id29:before { content: "*";}</style>
<article id="id29">
  <!-- something -->
</article>

flüchtig, aber was inline css ist nicht ..?

honk31
quelle
6
Das ist kein Inline-CSS. Inline-CSS erfordert, dass das Attribut style = "" an die einzelnen HTML-Elemente übergeben wird. Wird normalerweise für das Senden von CSS-Formatierungen an Google Mail benötigt, bei dem alle <style> -Tags entfernt werden. Siehe hier ( zurb.com/ink/inliner.php ) für einen Automator
kez
Ich denke, dies ist das Beste, was man an Inline-Pseudoelementen erreichen kann. Besser noch, benutze die neuen scopedStile und die :rootPseudo-Klasse (das ist so cool) : <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
Ben J
3
Korrektur: Verwenden Sie die :scopePseudoklasse:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
Ben J
1
Dieses Zeug ist sehr neu, wahrscheinlich nicht implementiert und wird sich möglicherweise ändern. Es ist in der aktuellen HTML-Spezifikation ( scoped Stile) und CSS- :scopeSpezifikation ( ) . Ich hätte klarer sein sollen.
Ben J
Die Verwendung von <style> ... </ style> -Tags wird als internes oder eingebettetes CSS bezeichnet, NICHT als Inline-CSS.
James Anderson Jr.
14

Sie können die Daten inline verwenden

 <style>   
 td { text-align: justify; }
 td:after { content: attr(data-content); display: inline-block; width: 100%; }
</style>

<table><tr><td data-content="post"></td></tr></table>
Cevher
quelle
2
Dies gibt das data-contentAttribut wie contentfür ein Pseudoelement aus. Es hat nichts mit dem Erstellen von Pseudoelementen mit Inline-CSS zu tun.
Nils Kaspersson
4
Ich bin hierher gekommen, um zu suchen, wie Pseudo-Selektoren in Inline-CSS angewendet werden können, und diese Antwort hat mir einen anderen Weg gezeigt, um dasselbe zu erreichen. Der Inhalt musste auf einer großen Anzahl möglicher Optionen basieren, die dynamisch erstellt wurden. Daher war es nicht praktisch, für jedes mögliche Ergebnis Haufen separater CSS-Selektoren zu schreiben.
Wunth
4
Dies ist tatsächlich eine sehr gute Antwort für jemanden, der einem After-Content dynamischen Inhalt hinzufügen möchte. Möglicherweise nicht im Zusammenhang mit diesem Problem, aber diese Frage wird angezeigt, wenn Sie über Google nach dieser Lösung suchen.
Aleks
Siehe die Dokumentation .
user4642212
8

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

Nein. Das style-Attribut definiert nur Stileigenschaften für ein bestimmtes HTML-Element. Pseudoklassen gehören zur Familie der Selektoren, die im Attribut nicht vorkommen .....

Wir können das gleiche auch für die Pseudoelemente schreiben

Nein. Das style-Attribut definiert nur Stileigenschaften für ein bestimmtes HTML-Element. Pseudoklassen und Pseudoelemente gehören zur Familie der Selektoren, die im Attribut nicht vorkommen, sodass Sie sie nicht inline formatieren können.

Champ
quelle
Siehe meine Antwort und meinen Kommentar zur Frage.
BoltClock
ja die sind nicht gleich aber der Grund dafür, dass sie nicht inline verwendet werden können, ist der gleiche, oder?
Champ
Die Antworten sind ähnlich, aber die Fragen sind sehr unterschiedlich.
BoltClock
6

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:

<parent style="background-image:url(path/to/file); background-size:0px;"></p>

<style> 
   parent:before{
      content:'';
      background-image:inherit;
      (other)
   }
</style>

manchmal kann dies praktisch sein.

Artem Mamaev
quelle
5

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

 <style>
     .horizontalProgress:after { width: 45%; }
 </style><!-- Change Value from Here -->

 <div class="horizontalProgress"></div>
Manik Biradar
quelle
22
Dies ist ein Inline-Stylesheet. Nicht Inline-CSS.
Esger
4
Abgesehen von der Tatsache, dass dies die eigentliche Frage nicht löst, ist dieser Code falsch, ::afterund ::beforePseudoelemente benötigen die content: valueansonsten standardmäßig verwendeten, content:nonewas im Grunde nichts ergibt.
zer00ne
Die Verwendung von <style> ... </ style> -Tags wird als internes oder eingebettetes CSS bezeichnet, NICHT als Inline-CSS.
James Anderson Jr.
1

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.

Nesha Zoric
quelle
Sie sind Pseudoelemente , die keine Zustände sind.
user4642212
0

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

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }

Wäre ungefähr so:

<table>
<tr>
<td style="text-align: justify;">
TD Content
<span class="inline_td_after" style="display: inline-block; width: 100%;"></span>
</td>
</tr>
</table>

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.

txyoji
quelle
0

Sie können verwenden

parent.style.setProperty("--padding-top", (height*100/width).toFixed(2)+"%");

in css

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}
surinder singh
quelle