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


141

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

8
Você não pode usar estilos embutidos para direcionar pseudo-classes ou pseudo-elementos.
David diz que restabelece Monica em

2
provavelmente duplicado de pseudo-classes CSS com estilos em linha
Champ

2
@ Champ: Não é a mesma pergunta, como pseudo-elementos e pseudo-classes não são a mesma coisa. Eu escrevi a minha própria resposta aqui para elaborar.
BoltClock

Respostas:


123

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.


37

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


6
isso não é CSS embutido. CSS embutido exige que o atributo style = "" seja passado para os elementos HTML individuais. Geralmente necessário para enviar CSS formatado para o Gmail, que retira qualquer coisa nas tags <style>. Veja aqui ( zurb.com/ink/inliner.php ) para uma automator
Kez

Acho que é o mais próximo possível dos pseudo-elementos embutidos. Melhor ainda, use os novos scopedestilos e :rootpseudo-classe (isso é tão legal): <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
Ben J

3
Correção: Use a :scopepseudo-classe:<article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
Ben J

1
Esse material é muito novo, provavelmente não foi implementado e possivelmente mudará. Está nas especificações HTMLscope atuais ( estilos d) e CSS Spec ( :scope) . Eu deveria ter sido mais claro.
Ben J

O uso das tags <style> ... </style> é chamado CSS interno ou incorporado, NÃO CSS embutido.
James Anderson Jr.

14

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>

2
Isso imprime o data-contentatributo como contentpara um pseudoelemento. Não tem nada a ver com a criação de pseudoelementos com CSS embutido.
Nils Kaspersson

4
Eu vim aqui procurando como aplicar pseudo-seletores em CSS embutido e essa resposta me mostrou outra maneira de conseguir a mesma coisa. O conteúdo precisava basear-se em um grande número de opções possíveis criadas dinamicamente e, portanto, não era prático escrever montes de seletores CSS separados para todos os resultados possíveis.
wunth

4
Na verdade, essa é uma resposta muito boa para alguém que deseja adicionar conteúdo dinâmico a um conteúdo posterior. Pode não estar relacionado ao problema, mas esta pergunta está sendo exibida ao procurar esta solução pelo Google.
Aleks


8

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.


Veja minha resposta e meu comentário sobre a pergunta.
BoltClock

sim o não é o mesmo. mas a razão por que eles não podem ser usados ​​em linha é o mesmo, certo?
Champ

As respostas são semelhantes, mas as perguntas são muito diferentes.
BoltClock

6

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.


5

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>

22
Esta é uma folha de estilo embutida. Não é CSS embutido.
Esger

4
Além do fato de que isso não resolve a questão real, esse código está errado ::aftere os ::beforepseudoelementos precisam dos content: valuepadrões content:noneque resultam em basicamente nada.
Zer00ne

O uso das tags <style> ... </style> é chamado CSS interno ou incorporado, NÃO CSS embutido.
James Anderson Jr.

1

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.


Eles são pseudo- elementos que não sejam Estados.
user4642212 5/07

0

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.


0

você pode usar

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

em css

el:after{
  ....
  padding-top:var(--padding-top, 0px);
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.