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

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%; }

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.

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 ..?

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>

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.

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.

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>

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.

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.

Sie können verwenden

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

in css

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