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


141

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

8
No puede usar estilos en línea para apuntar pseudo-clases o pseudo-elementos.
David dice que reinstale a Mónica el


2
@Champ: No es la misma pregunta, ya que los pseudo-elementos y las pseudo-clases no son lo mismo. Escribí mi propia respuesta aquí para elaborar.
BoltClock

Respuestas:


123

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.


37

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


66
eso no es CSS en línea. CSS en línea requiere que el atributo style = "" se pase a los elementos HTML individuales. Comúnmente requerido para enviar CSS formateado a Gmail, que elimina cualquier cosa en las etiquetas <style>. Ver aquí ( zurb.com/ink/inliner.php ) para un
automatizador

Creo que esto es lo más cerca que puedes estar de los pseudoelementos en línea. Mejor aún, utilizar los nuevos scopedestilos y :rootde clase pseudo (esto es genial): <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
Ben J

3
Corrección: Usa la :scopepseudo-clase:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
Ben J

1
Este material es muy nuevo, probablemente no esté implementado y posiblemente cambie. Está en la especificación HTMLscope actual ( estilos d) y la especificación CSS ( :scope) . Debería haber sido más claro.
Ben J

El uso de etiquetas <style> ... </style> se denomina CSS interno o incrustado, NO CSS en línea.
James Anderson Jr.

14

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>

2
Esto imprime el data-contentatributo como contentpara un pseudo-elemento. No tiene nada que ver con la creación de pseudoelementos con CSS en línea.
Nils Kaspersson

44
Vine aquí buscando cómo aplicar pseudo selectores en CSS en línea y esta respuesta me mostró otra forma de lograr lo mismo. El contenido debía basarse en una gran cantidad de opciones posibles creadas dinámicamente, por lo que no era práctico escribir montones de selectores CSS separados para cada resultado posible.
wunth

44
En realidad, esta es una muy buena respuesta para alguien que busca agregar contenido dinámico a un contenido posterior. Es posible que no esté relacionado con este problema, pero esta pregunta se muestra al buscar esta solución a través de Google.
Aleks el


8

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.


Vea mi respuesta y mi comentario sobre la pregunta.
BoltClock

Sí, no son lo mismo. pero la razón detrás de que no se pueden usar en línea es la misma, ¿verdad?
Campeón el

Las respuestas son similares, pero las preguntas son muy diferentes.
BoltClock

6

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.


5

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>

22
Esta es una hoja de estilo en línea. No en línea css.
Esger

44
Aparte del hecho de que esto no resuelve la pregunta real, este código es incorrecto ::aftery los ::beforepseudoelementos necesitan lo content: valuecontrario, lo que por defecto content:noneresulta en básicamente nada.
zer00ne

El uso de etiquetas <style> ... </style> se denomina CSS interno o incrustado, NO CSS en línea.
James Anderson Jr.

1

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.


Son pseudo- elementos que no son estados.
user4642212

0

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.


0

puedes usar

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

en css

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.