Sto creando una firma e-mail HTML con CSS in linea (ad esempio CSS negli attributi style) e sono curioso di sapere se è possibile utilizzare gli pseudo-elementi :before e .Uso del CSS: prima e: dopo pseudo-elementi con CSS in linea?
In tal caso, come implementare qualcosa di simile con CSS in linea?
td { text-align: justify; }
td:after { content: ""; display: inline-block; width: 100%; }
No non puoi target L'pseudo-classes o pseudo-elements in linea-css come disse David Thomas. Per maggiori dettagli vedi this risposta di BoltClock circa pseudo-classi
No. attributo Lo stile definisce solo proprietà dello stile per un elemento HTML determinato . Pseudo-classi sono un membro della famiglia dei selettori, che non si verificano in attributo .....
Possiamo anche scrivere usare stesso per le pseudo-elementi
No. L'attributo style definisce solo le proprietà di stile per un dato elemento HTML . Pseudo-classi e pseudo-elementi sono membri della famiglia di selettori, che non si verificano nell'attributo, quindi non li si può definire in linea.
Non è possibile specificare gli stili in linea per gli pseudo-elementi.
Questo perché pseudo-elementi, come le pseudo-classi (vedi la mia risposta a this other question), sono definiti in CSS usando selettori come astrazioni dell'albero del documento che non possono essere espresse in HTML. Un attributo in linea style, d'altra parte, è specificato in HTML per un particolare elemento.
Poiché gli stili in linea possono essere eseguiti solo in HTML, si applicano solo all'elemento HTML su cui sono definiti e non a tutti gli pseudo-elementi che genera.
Per inciso, la differenza principale tra pseudo-elementi e pseudo-classi in questo aspetto è che le proprietà ereditate per impostazione predefinita will be inherited da :before e :after dall'elemento di generazione, mentre stili pseudo-classe semplicemente non si applicano affatto. Nel tuo caso, ad esempio, se inserisci text-align: justify in un attributo di stile inline per un elemento td, verrà ereditato da td:after. L'avvertenza è che non è possibile dichiarare td:after con l'attributo di stile in linea; devi farlo nel foglio di stile.
come già detto: non è possibile chiamare una css pseudo-classe/-elemento in linea. quello che ho fatto ora è: dare al tuo elemento un identificatore univoco, es. un ID o una classe unica. e scrivere un raccordo <style> elemento
<style>#id29:before { content: "*";}</style>
<article id="id29">
<!-- something -->
</article>
fugly, ma quello che non sta css inline ..?
non è in linea CSS. I CSS in linea richiedono che l'attributo style = "" sia passato ai singoli elementi HTML. Comunemente richiesto per l'invio di CSS formattato a Gmail, che rimuove qualsiasi cosa nei tag '. Correzione –
: utilizzare la pseudo-classe ': scope':'
È possibile utilizzare i dati in linea
<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>
Stampa l'attributo 'data-content' come' content' per uno pseudo-elemento. Non ha nulla a che fare con la creazione di pseudo-elementi con CSS in linea. –
Sono venuto qui cercando come applicare pseudo selettori in CSS in linea e questa risposta mi ha mostrato un altro modo per ottenere la stessa cosa. Il contenuto doveva essere basato su un gran numero di opzioni possibili create dinamicamente e quindi non era pratico scrivere un mucchio di selettori CSS separati per ogni possibile risultato. – wunth
Questa è davvero una buona risposta per chi cerca di aggiungere contenuti dinamici a un contenuto successivo. Potrebbe non essere correlato a questo problema, ma questa domanda viene visualizzata durante la ricerca di questa soluzione tramite Google. – Aleks
Sì è possibile, basta aggiungere gli stili inline per l'elemento che si aggiunge dopo o prima, Esempio
<style>
.horizontalProgress:after { width: 45%; }
</style><!-- Change Value from Here -->
<div class="horizontalProgress"></div>
Questo è un foglio di stile incorporato. Non in linea css. – Esger
A parte il fatto che questo non risolve la domanda effettiva, questo codice è sbagliato, gli pseudo-elementi ':: after' e' :: before' hanno bisogno di 'content: value' altrimenti il valore predefinito è' content: none' il che risulta sostanzialmente in nulla. – zer00ne
Hai bisogno linea ? – Scrimothy
Non è possibile utilizzare gli stili in linea per scegliere come target pseudo-classi o pseudo-elementi. –
duplicato probabilmente di [Pseudo-classi CSS con stili in linea] (http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) – Champ