Un’interruzione di riga può essere aggiunta agli elementi HTML senza dover utilizzare un ritorno di interruzione
utilizzando pseudo-elementi. Gli pseudo-elementi sono usati per modellare una parte specifica di un elemento. Qui useremo::after per definire lo stile di un elemento HTML per aggiungere un’interruzione di riga.
Nel codice sopra, usiamo lo pseudo-elemento :: dopo
su ogni elemento in linea (rappresentato dallo span) per aggiungere un ritorno a capo (rappresentato dalla "a") dopo la riga di testo dello span. Il ::after
in questo caso ha una proprietà di contenuto e una proprietà di spazio vuoto disponibile per l’uso.
Il ‚Äòcontenuto‚Äô La proprietà descrive le cose che vogliamo iniettare nello span. La proprietà dello spazio bianco ci dice se dobbiamo preservare lo spazio bianco. Lasciare disattivata questa particolare proprietà non interferisce con la caratteristica di blocco in linea dello span. Quindi dobbiamo aggiungere questa particolare proprietà per sovrascriverla.
Mentre si pasticcia sempre più con lo stile e il layout, probabilmente scoprirai che la soluzione sopra non è necessariamente la soluzione migliore. Se aggiungi padding di qualsiasi tipo e anche lo sfondo, vedrai che quelle proprietà CSS tendono a confondere il punto in cui lo sfondo entra in gioco. Vedere l’esempio di codice di seguito che illustra il punto:
Professore Silente
Professore McGonagall
Professore python
Professore Trelawney