web-dev-qa-db-fra.com

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

Je crée une signature électronique HTML avec du CSS intégré (c.-à-d. CSS dans les attributs style) et je suis curieux de savoir s’il est possible d’utiliser les pseudo-éléments :before et :after.

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

td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
htmlcsscss-selectorspseudo-elementinline-styles
118
Bah-Bee

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

Cela est dû au fait que les pseudo-éléments, tels que les pseudo-classes (voir ma réponse à cette autre question ), sont définis dans CSS à l'aide de sélecteurs en tant qu'abstractions de l'arborescence de document qui ne peuvent pas être exprimées en HTML. En revanche, un attribut inline style 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 ont été 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 sous cet aspect est que les propriétés héritées par défaut seront hérité par :before et :after à partir de 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: justify dans un attribut de style intégré pour un élément td, il sera hérité par td:after. La mise en garde est que vous ne pouvez pas déclarer td:after avec l'attribut inline style; vous devez le faire dans la feuille de style.

106
BoltClock

comme mentionné ci-dessus: il n'est pas possible d'appeler un élément pseudo-classe/-element css en ligne. Ce que j’ai fait à présent est le suivant: attribuez à votre élément un identifiant unique, f.ex. un identifiant ou une classe unique. et écrivez un élément <style> approprié

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

fugly, mais quel css inline n'est pas ..?

33
honk31

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

Non, vous ne pouvez pas cibler les pseudo-classes ou pseudo-éléments dans inline-css comme David Thomas m'a dit. Pour plus de détails, voir this , répondez par BoltClock à propos de Pseudo-classes

Non. L'attribut style définit uniquement les propriétés de style d'un élément HTML donné. Les pseudo-classes sont un membre de la famille des sélecteurs, qui ne figurent 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 d'un élément HTML donné. Les pseudo-classes et les pseudo-éléments sont un membre de la famille des sélecteurs, qui ne figurent pas dans l'attribut, vous ne pouvez donc pas les définir en ligne.

7
Champ

Oui c'est possible, ajoutez juste 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>
5
sandip7400

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

0
Nesha Zoric

Si vous avez le contrôle sur le code HTML, vous pouvez ajouter un élément réel au lieu d'un pseudo. : avant et: après les pseudo-éléments sont rendus juste après la balise open ou juste avant la balise close. 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>

Garder en tete; Vos "vrais" éléments avant et après et tout élément utilisant des CSS en ligne vont considérablement augmenter la taille de vos pages et ignorer les optimisations de chargement de pages rendues possibles par les CSS et les pseudo-éléments externes.

0
txyoji