Posso avere multipli: prima di pseudo-elementi per lo stesso elemento?

Question

È possibile avere più pseudos :before per lo stesso elemento?

.circle:before { 
    content: "\25CF"; 
    font-size: 19px; 
} 
.now:before{ 
    content: "Now"; 
    font-size: 19px; 
    color: black; 
} 

Sto cercando di applicare gli stili di cui sopra allo stesso elemento utilizzando jQuery, ma solo il più recente è applicato, non entrambi.

Answer 1

In CSS2.1, un elemento può avere al massimo uno qualsiasi tipo di pseudo-elemento in qualsiasi momento. (Questo significa che un elemento può avere sia un un pseudo-elemento :before e :after -. Semplicemente non può avere più di uno di ogni tipo)

Di conseguenza, quando si dispone di più :before regole di corrispondenza dello stesso elemento, lo faranno tutto in cascata e si applica a un singolo pseudoelemento :before, come con un elemento normale. Nel tuo esempio, il risultato finale è simile al seguente:

.circle.now:before { 
    content: "Now"; 
    font-size: 19px; 
    color: black; 
} 

Come si può vedere, solo la dichiarazione content che ha precedenza più alta (come detto, quello che arriva ultimo) avrà effetto - il resto delle dichiarazioni vengono scartati, come nel caso di qualsiasi altra proprietà CSS.

Questo comportamento è descritto nel Selectors section of CSS2.1:

pseudo-elementi si comportano proprio come elementi reali nei CSS con le eccezioni di seguito descritte e elsewhere.

Ciò implica che i selettori con gli pseudo-elementi funzionano proprio come i selettori per elementi normali. Significa anche che la cascata dovrebbe funzionare nello stesso modo. Stranamente, CSS2.1 sembra essere l'unico riferimento; né lo css3-selectors né lo css3-cascade ne parlano affatto, e resta da vedere se verrà chiarito in una specifica futura.

Se un elemento può corrispondere a più di un selettore con lo stesso pseudo-elemento e si desidera che tutti vengano applicati in qualche modo, sarà necessario creare regole CSS aggiuntive con selettori combinati in modo da poter specificare esattamente cosa il browser dovrebbe fare in quei casi. Non riesco a fornire un esempio completo, inclusa la proprietà content, poiché non è chiaro ad esempio se il simbolo o il testo debbano venire prima. Ma il selettore di cui hai bisogno per questa regola combinata è .circle.now:before o .now.circle:before - qualsiasi selettore tu scelga è una preferenza personale in quanto entrambi i selettori sono equivalenti, è solo il valore della proprietà content che dovrai definire tu.

Se è ancora necessario un esempio concreto, vedere la risposta a this similar question.

The legacy css3-content specification contains a section on inserting multiple ::before and ::after pseudo-elements utilizzando una notazione compatibile con la cascata CSS2.1, ma si noti che quel particolare documento è obsoleto - non è stato aggiornato dal 2003 e nessuno ha implementato quella funzionalità negli ultimi dieci anni. La buona notizia è che il documento abbandonato è attivamente sottoposto a una riscrittura nelle vesti di css-content-3 e css-pseudo-4. La cattiva notizia è che la caratteristica multipla degli pseudo-elementi non si trova in nessuna delle due specifiche, presumibilmente dovendo, ancora una volta, alla mancanza di interesse per l'implementatore.

Answer 2

Se il tuo elemento principale ha alcuni elementi figlio o testo, potresti farne uso.

Posiziona il tuo elemento principale relativo (o assoluto/fisso) e usa entrambi: prima e: dopo posizionato assoluto (nella mia situazione doveva essere assoluto, non so del tuo).

Ora se vuoi un altro pseudo-elemento, collega un assoluto: prima a uno dei figli dell'elemento principale (se hai solo testo, mettilo in uno span, ora hai un elemento), che non è relativo/assoluto/fisso.

Questo elemento inizierà a comportarsi come se il suo proprietario fosse il vostro elemento principale.

HTML

<div class="circle"> 
    <span>Some text</span> 
</div> 

CSS

.circle { 
    position: relative; /* or absolute/fixed */ 
} 

.circle:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle:after { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
} 

.circle span { 
    /* not relative/absolute/fixed */ 
} 

.circle span:before { 
    position: absolute; 
    content: ""; 
    /* more styles: width, height, etc */ 
}