À l'aide de CSS :before et :after pseudo-éléments avec du CSS?

Question

Je suis en train de faire une signature d'e-mail HTML avec du CSS (c'est à dire CSS en style d'attributs), et je suis curieux de savoir si il est possible d'utiliser l' :before et :after des pseudo-éléments.

Si oui, comment pourrais-je mettre en place quelque chose comme ça avec du CSS?

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

Answer 1

Vous ne pouvez pas spécifier des styles en ligne pour les pseudo-éléments.

C'est parce que les pseudo-éléments, comme des pseudo-classes (voir ma réponse à cette autre question), sont définis dans le CSS à l'aide des sélecteurs comme des abstractions de l'arborescence des documents qui ne peuvent pas être exprimées dans le langage HTML. Inline style d'attribut, d'autre part, est spécifié dans le code HTML d'un élément particulier.

Depuis des styles en ligne peut se produire uniquement en HTML, ils ne s'appliquent à l'élément HTML qui ils sont définis, et non pas à un pseudo-éléments qu'il génère.

En aparté, la principale différence entre les pseudo-éléments et les pseudo-classes dans cet aspect, c'est que les propriétés sont héritées par défaut va être héritée par l' :before et :after de la génération de l'élément, alors que la pseudo-classe les styles ne s'appliquent pas à tous. Dans votre cas, par exemple, si vous placez text-align: justify dans un attribut de style en ligne pour un td élément, il sera héritée par l' td:after. Le problème, c'est que vous ne pouvez pas déclarer td:after avec l'attribut de style en ligne; vous devez le faire dans la feuille de style.

Answer 2

comme mentionné ci-dessus: ce n'est pas possible d'appeler un css pseudo-classe / élément inline. ce que je fait, c'est: donner votre élément identificateur unique, le f.ex. un id ou une classe unique. et écrire un raccord <style> élément

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

moche, mais ce que css n'est pas..?

Answer 3

Vous pouvez utiliser les données dans inline

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

Non, vous ne pouvez pas cibler les pseudo-classes ou pseudo-éléments en inline-css comme David Thomasa dit. Pour plus de détails, voir cette réponse par BoltClock sur les Pseudo-classes

Pas de. L'attribut style définit uniquement des propriétés de style pour une L'élément HTML. Les Pseudo-classes sont un membre de la famille de sélecteurs, qui ne se produisent pas dans l'attribut .....

Nous pouvons aussi écrire à utiliser même pour les pseudo-éléments

Pas de. L'attribut style définit uniquement des propriétés de style pour une L'élément HTML. Les Pseudo-classes et pseudo-éléments sont un membre de la famille de sélecteurs, qui ne se produisent pas dans l'attribut si vous ne pouvez pas le style inline.