html - pseudo - selectores avanzados css

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

Question

Estoy haciendo una firma de correo electrónico HTML con CSS en línea (es decir, CSS en atributos de style ), y tengo curiosidad sobre si es posible usar los pseudo-elementos :before y :after .

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

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

Answer 1

Como se mencionó anteriormente, no puede usar elementos en línea para diseñar pseudo clases . Antes y después de las pseudo clases son estados de elementos, no elementos reales. Posiblemente solo puedas usar JavaScript para esto.

Answer 2

No puede especificar estilos en línea para pseudo-elementos.

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

Como 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 los pseudo-elementos que genere.

Como un aparte, la diferencia principal entre pseudo-elementos y pseudo-clases en este aspecto es que las propiedades que son heredadas por defecto serán heredadas por :before y :after desde 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: justify en un atributo de estilo en línea para un elemento td , será heredado por td:after . La advertencia es que no puede declarar td:after con el atributo de estilo en línea; debes hacerlo en la hoja de estilos.

Answer 3

No, no puedes enfocar las pseudo-classes o pseudo-elements en inline-css como dijo David Thomas . Para más detalles ver esta respuesta de BoltClock sobre Pseudo-clases

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

También podemos escribir usar lo mismo para los pseudo-elementos

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

Answer 4

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>

Answer 5

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

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

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

Answer 6

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

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

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