Usando CSS: prima e: dopo pseudo-elementi con CSS inline?

Sto facendo una firma e-mail HTML con CSS in linea (ad esempio CSS in styleattributi), e sono curioso di vedere se è possibile utilizzare le :beforee :afterpseudo-elementi.

In tal caso, come implementerei qualcosa di simile con CSS inline?

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

Non è possibile specificare gli stili incorporati per gli pseudo-elementi.

Questo perché gli pseudo-elementi, come le pseudo-classi (vedi la mia risposta a questa altra domanda ), sono definiti nei CSS usando i selettori come astrazioni dell'albero del documento che non possono essere espresse in HTML. Un styleattributo inline , d'altra parte, è specificato in HTML per un elemento particolare.

Poiché gli stili inline possono verificarsi solo in HTML, si applicheranno solo all'elemento HTML su cui sono definiti e non a tutti gli pseudo-elementi che genera.

A parte questo, la principale differenza tra pseudo-elementi e pseudo-classi in questo aspetto è che le proprietà ereditate di default saranno ereditate da :beforee :afterdall'elemento generatore, mentre gli stili di pseudo-classe semplicemente non si applicano affatto. Nel tuo caso, ad esempio, se si inserisce text-align: justifyun attributo di stile inline per un tdelemento, verrà ereditato da td:after. L'avvertenza è che non è possibile dichiarare td:aftercon l'attributo inline style; devi farlo nel foglio di stile.

come menzionato sopra: non è possibile chiamare in linea una pseudo-classe / -element css. quello che ho fatto ora è: dare al tuo elemento un identificativo univoco, ad esempio un ID o una classe unica. e scrivi un <style>elemento adatto

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

fugly, ma cosa css inline non è ..?

È possibile utilizzare i dati in linea

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

No, non puoi scegliere come target le pseudo-classi o pseudo-elementi inline-css, come diceva David Thomas . Per maggiori dettagli vedi questa risposta di BoltClock sulle pseudo-classi

No. L'attributo style definisce solo le proprietà di stile per un dato elemento HTML. Le pseudo-classi sono un membro della famiglia di selettori, che non si verificano nell'attributo .....

Possiamo anche scrivere use same per gli pseudo-elementi

No. L'attributo style definisce solo le proprietà di stile per un dato elemento HTML. Le pseudo-classi e gli pseudo-elementi sono membri della famiglia di selettori, che non si verificano nell'attributo, quindi non puoi modellarli in linea.

Non è possibile creare pseudo elementi in CSS inline.

Tuttavia, se puoi creare uno pseudo elemento in un foglio di stile, allora c'è un modo per modellarlo in linea impostando uno stile inline sul suo elemento genitore e quindi usando la parola chiave eredita per modellare lo pseudo elemento, in questo modo:

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

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

a volte questo può essere utile.

Sì, è possibile , basta aggiungere stili incorporati per l'elemento che aggiungi dopo o prima, Esempio

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

 <div class="horizontalProgress"></div>

Come accennato in precedenza, non è possibile utilizzare elementi incorporati per lo styling di pseudo-classi . Le pseudo classi prima e dopo sono stati di elementi, non elementi reali. È possibile utilizzare JavaScript solo per questo.

Se hai il controllo sull'HTML, puoi aggiungere un elemento reale anziché uno pseudo. : before e: after gli pseudo elementi vengono visualizzati subito dopo il tag aperto o subito prima del tag di chiusura. L'equivalente inline per questo css

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

Sarebbe qualcosa del genere:

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

Tieni a mente; I tuoi "reali" elementi prima e dopo e qualsiasi cosa con CSS incorporato aumenteranno notevolmente le dimensioni delle tue pagine e ignoreranno le ottimizzazioni del caricamento delle pagine rese possibili da elementi CSS e pseudo esterni.

Puoi usare

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

in css

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