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

Je suis en train de faire une signature d'e-mail HTML avec du CSS (c'est à dire CSS dans style attributs), et je suis curieux de savoir si il est possible d'utiliser le :before et :after 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%; }
  • Avez-vous besoin inline?
  • Vous ne pouvez pas utiliser des styles en ligne pour cibler les pseudo-classes ou des pseudo-éléments.
  • probally double de CSS Pseudo-classes avec des styles en ligne
  • Pas la même question, que les pseudo-éléments et les pseudo-classes ne sont pas la même chose. J'ai écrit la réponse de mon propre ici de préciser.
InformationsquelleAutor Bah-Bee | 2013-01-03
  1. 104

    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. Une ligne style 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 à une pseudo-éléments qu'il génère.

    Que d'un côté, 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 est être hérité par :before et :after de l'élément générateur, 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 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.

    InformationsquelleAutor BoltClock
  2. 33

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

    • ce n'est pas du CSS. CSS nécessite au style="" attribut à être transmis à la personne à des éléments HTML. Généralement requis pour l'envoi de CSS formaté à Gmail, qui ne tient rien dans <style> balises. Voir ici (zurb.com/ink/inliner.php) pour un automator
    • Je pense que c'est le plus proche que vous pouvez obtenir pour inline pseudo-éléments. Mieux encore, l'utilisation de la nouvelle scoped styles et :root pseudo-classe (c'est trop cool): <article><style scoped>:root:before { content: "*";}</style><!-- something --></article>.
    • Correction: Utiliser le :scope pseudo-classe: <article><style scoped>:scope:before { content: "*";}</style><!-- something --></article>
    • l'étendue CSS est un FF seule chose: caniuse.com/#search=scoped
    • Tout ça est très nouveau, probablement pas mis en œuvre, et va peut-être changer. C'est dans le courant de HTML spec (scoped styles) et CSS (:scope). Je devrais avoir été plus clair.
    InformationsquelleAutor honk31
  3. 7

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

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

    • Voir ma réponse et mon commentaire sur la question.
    • oui le ne sont pas les mêmes. mais la raison derrière ce qu'ils ne peuvent pas être utilisé en ligne est même droit?
    • Les réponses sont similaires, mais les questions sont très différentes.
    • c'est qu'une bonne façon d'expliquer la question 😉
    InformationsquelleAutor Champ
  4. 7

    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>
    • Ce imprime le data-content attribut comme content pour un pseudo-élément. Il n'a rien à voir avec la création des pseudo-éléments avec du CSS.
    • Je suis venu ici à la recherche de comment appliquer pseudo-sélecteurs CSS et cette réponse m'a montré une autre façon d'obtenir la même chose. Le contenu devait être fondée sur un grand nombre d'options possibles créé dynamiquement et il n'était pas pratique pour écrire des tas de séparer les sélecteurs CSS pour chaque résultat possible.
    • C'est vraiment une très bonne réponse pour quelqu'un qui cherche à ajouter du contenu dynamique à un contenu. Pourraient ne pas être liés à cette question, mais cette question est affichée lors de la recherche de cette solution par l'intermédiaire de Google.
    InformationsquelleAutor Cevher
  5. 4

    Oui c'est possible, il suffit d'ajouter des styles en ligne pour l'élément qui vous adjonction, après ou avant, Exemple

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

 <div class="horizontalProgress"></div>
    • C'est une ligne de la feuille de style. Pas css.
    • Autre que le fait que ce n'est pas résoudre la question réelle, ce code est faux, ::after et ::before pseudo-éléments ont besoin de la content: value sinon, la valeur par défaut est content:none qui résulte en rien sur le fond.
    InformationsquelleAutor sandip7400
  6. 0

    Comme mentionné avant, vous ne pouvez pas utiliser les éléments en ligne pour le style pseudo-classes. Avant et après pseudo-classes sont des états d'éléments, pas d'éléments réels. Vous ne pourriez probablement utiliser
    JavaScript pour cela.

    InformationsquelleAutor Nesha Zoric
  7. 0

    Si vous avez le contrôle sur le code HTML, alors vous pourriez ajouter un élément réel au lieu d'un pseudo.
    :before et :after pseudo-éléments sont rendus juste après la balise d'ouverture ou juste avant la balise de fermeture.
    La ligne d'équivalent pour ce css

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

    Serait quelque chose comme ceci:

    <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, Votre "vrai" avant et après que les éléments et n'importe quoi avec du css permettra d'accroître considérablement la taille de vos pages et de les ignorer chargement de la page, les optimisations que css externe et de la pseudo-éléments rendent possible.

    InformationsquelleAutor txyoji