Usando CSS: pseudo-elementos antes e: depois com CSS embutido?

Eu estou fazendo uma assinatura de e-mail HTML com CSS inline (ie CSS em styleatributos), e estou curioso para saber se é possível usar os :beforee :afterpseudo-elementos.

Se sim, como eu implementaria algo assim com CSS embutido?

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

Você não pode especificar estilos embutidos para pseudoelementos.

Isso ocorre porque pseudoelementos, como pseudo-classes (veja minha resposta a essa outra pergunta ), são definidos no CSS usando seletores como abstrações da árvore de documentos que não podem ser expressas em HTML. Um styleatributo embutido , por outro lado, é especificado no HTML para um elemento específico.

Como os estilos embutidos só podem ocorrer em HTML, eles se aplicarão apenas ao elemento HTML em que estão definidos, e não a quaisquer pseudoelementos que ele gerar.

Como um aparte, a principal diferença entre pseudoelementos e pseudoclasses nesse aspecto é que as propriedades herdadas por padrão serão herdadas por :beforee :afterdo elemento gerador, enquanto os estilos de pseudoclasses simplesmente não se aplicam. No seu caso, por exemplo, se você text-align: justifyinserir um atributo de estilo embutido para um tdelemento, ele será herdado por td:after. A ressalva é que você não pode declarar td:aftercom o atributo de estilo embutido; você deve fazer isso na folha de estilo.

como mencionado acima: não é possível chamar uma linha pseudo-classe / elemento CSS. o que eu fiz agora é: dê ao seu elemento um identificador único, por exemplo, um ID ou uma classe única. e escreva um <style>elemento de ajuste

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

fugly, mas o que inline css não é ..?

Você pode usar os dados em linha

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

Não, você não pode direcionar as pseudo-classes ou pseudo-elementos no inline-css, como David Thomas disse. Para mais detalhes, veja esta resposta de BoltClock sobre pseudo-classes

Não. O atributo style define apenas propriedades de estilo para um determinado elemento HTML. As pseudo-classes são membros da família de seletores, que não ocorrem no atributo .....

Também podemos escrever use same para os pseudo-elementos

Não. O atributo style define apenas propriedades de estilo para um determinado elemento HTML. Pseudo-classes e pseudo-elementos são membros da família de seletores, que não ocorrem no atributo, portanto você não pode estilizá-los inline.

Você não pode criar pseudo elementos no CSS embutido.

No entanto, se você pode criar um pseudo-elemento em uma folha de estilo, há uma maneira de estilizá-lo inline, definindo um estilo in-line para seu elemento pai e, em seguida, usando a palavra-chave herdada para estilizar o pseudo-elemento, desta forma:

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

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

às vezes isso pode ser útil.

Sim, é possível , basta adicionar estilos embutidos para o elemento que você adicionou após ou antes, Exemplo

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

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

Como mencionado anteriormente, você não pode usar elementos embutidos para estilizar pseudo classes . As pseudo-classes antes e depois são estados de elementos, não elementos reais. Você só pode usar JavaScript para isso.

Se você tiver controle sobre o HTML, poderá adicionar um elemento real em vez de um pseudo-elemento. : before e: after os pseudo-elementos são renderizados logo após a tag aberta ou logo antes da tag close. O equivalente em linha para este css

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

Seria algo como isto:

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

Tenha em mente; Seus elementos "reais" antes e depois e qualquer coisa com CSS embutido aumentam bastante o tamanho das suas páginas e ignoram as otimizações de carregamento de página que possibilitam o CSS externo e os pseudo elementos.

você pode usar

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

em css

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