Usando CSS: antes y: después de pseudo-elementos con CSS en línea?

Estoy haciendo una firma de correo electrónico HTML con CSS en línea (es decir, en CSS styleatributos), y estoy curioso en cuanto a si es posible utilizar las :beforey :afterlos pseudo-elementos.

Si es así, ¿cómo implementaría algo como esto con CSS en línea?

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

No puede especificar estilos en línea para pseudoelementos.

Esto se debe a que los pseudoelementos, como las pseudo-clases (vea mi respuesta a esta otra pregunta ), se definen en CSS utilizando selectores como abstracciones del árbol de documentos que no se pueden expresar en HTML. Un styleatributo en línea , por otro lado, se especifica dentro de HTML para un elemento en particular.

Dado que los estilos en línea solo pueden aparecer en HTML, solo se aplicarán al elemento HTML en el que están definidos, y no a ningún pseudoelemento que genere.

Por otro lado, la principal diferencia entre pseudo-elementos y pseudo-clases en este aspecto es que las propiedades que se heredan por defecto serán heredadas por :beforey :afterdesde el elemento generador, mientras que los estilos de pseudo-clase simplemente no se aplican en absoluto. En su caso, por ejemplo, si coloca text-align: justifyun atributo de estilo en línea para un tdelemento, será heredado por td:after. La advertencia es que no puede declarar td:aftercon el atributo de estilo en línea; debes hacerlo en la hoja de estilo.

como se mencionó anteriormente: no es posible llamar a una pseudo-clase / -elemento css en línea. lo que hice ahora es: darle a su elemento un identificador único, f.ex. una identificación o una clase única. y escribir un <style>elemento apropiado

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

fugly, pero ¿qué css en línea no es ...?

Puedes usar los datos en línea

 <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, no puede apuntar a las pseudo-clases o pseudo-elementos en inline-css como dijo David Thomas . Para más detalles vea esta respuesta de BoltClock sobre Pseudo-clases

No. El atributo de estilo solo define las propiedades de estilo para un elemento HTML dado. Las pseudo-clases son miembros de la familia de selectores, que no aparecen en el atributo .....

También podemos escribir uso igual para los pseudoelementos

No. El atributo de estilo solo define las propiedades de estilo para un elemento HTML dado. Las pseudo-clases y los pseudo-elementos son miembros de la familia de selectores, que no aparecen en el atributo, por lo que no puede aplicarles un estilo en línea.

No puede crear pseudo elementos en CSS en línea.

Sin embargo, si puede crear un pseudo elemento en una hoja de estilo, entonces hay una manera de darle estilo en línea estableciendo un estilo en línea en su elemento padre, y luego usando la palabra clave heredar para dar estilo al pseudo elemento, de esta manera:

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

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

a veces esto puede ser útil.

Sí, es posible , solo agregue estilos en línea para el elemento que agrega después o antes, Ejemplo

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

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

Como se mencionó anteriormente, no puede usar elementos en línea para diseñar pseudo clases . Las pseudo clases anteriores y posteriores son estados de elementos, no elementos reales. Es posible que solo puedas usar JavaScript para esto.

Si tiene control sobre el HTML, entonces podría agregar un elemento real en lugar de un pseudo uno. : before y: after los pseudo elementos se representan justo después de la etiqueta abierta o justo antes de la etiqueta cerrada. El equivalente en línea para este CSS

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

Sería algo como esto:

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

Tenga en cuenta; Sus elementos "reales" de antes y después y cualquier cosa con CSS en línea aumentará en gran medida el tamaño de sus páginas e ignorará las optimizaciones de carga de página que los CSS externos y los pseudoelementos hacen posible.

puedes usar

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

en css

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