Utilisation de CSS: avant et: après des pseudo-éléments avec CSS en ligne?

Je fais une signature électronique HTML avec CSS en ligne ( par exemple CSS dans les styleattributs), et je suis curieux de savoir s'il est possible d'utiliser les :beforeet :afterpseudo-éléments.

Si oui, comment pourrais-je implémenter quelque chose comme ça avec le CSS en ligne?

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

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

En effet, les pseudo-éléments, comme les pseudo-classes (voir ma réponse à cette autre question ), sont définis en CSS à l'aide de sélecteurs comme abstractions de l'arborescence du document qui ne peuvent pas être exprimées en HTML. Un styleattribut en ligne , en revanche, est spécifié dans HTML pour un élément particulier.

Étant donné que les styles en ligne ne peuvent apparaître qu'en HTML, ils ne s'appliqueront qu'à l'élément HTML sur lequel ils sont définis, et non aux pseudo-éléments qu'il génère.

En passant, la principale différence entre les pseudo-éléments et les pseudo-classes dans cet aspect est que les propriétés héritées par défaut seront héritées par :beforeet :afterde l'élément générateur, alors que les styles de pseudo-classes ne s'appliquent tout simplement pas. Dans votre cas, par exemple, si vous placez text-align: justifyun attribut de style en ligne pour un tdélément, il sera hérité par td:after. La mise en garde est que vous ne pouvez pas déclarer td:afteravec l'attribut de style en ligne; vous devez le faire dans la feuille de style.

comme mentionné ci-dessus: il n'est pas possible d'appeler une pseudo-classe / élément css en ligne. ce que j'ai fait maintenant, c'est: donner à votre élément un identifiant unique, par exemple. un identifiant ou une classe unique. et écrivez un <style>élément approprié

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

fugly, mais que css en ligne n'est pas ..?

Vous pouvez utiliser les données en ligne

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

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

Non. L'attribut style définit uniquement les propriétés de style pour un élément HTML donné. Les pseudo-classes font partie de la famille des sélecteurs, qui n'apparaissent pas dans l'attribut .....

On peut aussi écrire use same pour les pseudo-éléments

Non. L'attribut style définit uniquement les propriétés de style pour un élément HTML donné. Les pseudo-classes et pseudo-éléments font partie de la famille des sélecteurs, qui n'apparaissent pas dans l'attribut, vous ne pouvez donc pas les styliser en ligne.

Vous ne pouvez pas créer de pseudo éléments en CSS en ligne.

Cependant, si vous pouvez créer un pseudo élément dans une feuille de style, il existe un moyen de le styliser en ligne en définissant un style en ligne sur son élément parent, puis en utilisant le mot-clé inherit pour styliser le pseudo élément, comme ceci:

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

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

parfois cela peut être pratique.

Oui, c'est possible , ajoutez simplement des styles en ligne pour l'élément que vous ajoutez après ou avant, Exemple

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

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

Comme mentionné précédemment, vous ne pouvez pas utiliser d'éléments en ligne pour styliser les pseudo-classes . Les pseudo-classes avant et après sont des états d'éléments, pas des éléments réels. Vous ne pouvez utiliser JavaScript que pour cela.

Si vous avez le contrôle sur le HTML, vous pouvez ajouter un élément réel au lieu d'un pseudo. : avant et: après que les pseudo éléments sont rendus juste après la balise ouverte ou juste avant la balise de fermeture. L'équivalent en ligne pour ce css

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

Serait quelque chose comme ça:

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

Gardez à l'esprit; Vos "vrais" éléments avant et après et tout ce qui contient du CSS en ligne augmentera considérablement la taille de vos pages et ignoreront les optimisations de chargement de page rendues possibles par le CSS externe et les pseudo éléments.

vous pouvez utiliser

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

en css

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