Perché, come e quando gli sviluppatori usano la proprietà css: before o: after {content: ""} per modificare una pagina?


Risposta 1:

L'uso più comune di: before pseudo element nowdays è visualizzare un'icona usando un font icona, prima di un link o pulsante. Questo è ciò che utilizza la libreria "Font Awesome", ad esempio.

L'uso più comune dello pseudo elemento: after è coinvolto nel metodo "clearfix":

Forza l'elemento per auto-cancellare i suoi figli | CSS-Tricks

Vi sono, tuttavia, molti altri casi d'uso per questi pseudo elementi. Fondamentalmente, vengono utilizzati per visualizzare qualcosa prima o dopo un elemento.

L'uso più avanzato di cui ho sentito parlare è l'aggiunta di contenuti dinamici nelle campagne di e-mail marketing (come nelle e-mail che possono essere aggiornate dinamicamente, dopo essere state inviate). Vedere

Come codificare un feed Twitter dinamico dal vivo in email HTML


Risposta 2:

Di solito lo uso per aggiungere ornamenti alla pagina che non è presente nel markup della pagina.

  • Segno di spunta proiettili
  • Colori di sovrapposizione dello sfondo
  • Schiarimento di galleggianti
  • Virgolette su blocchi di virgolette
  • Aggiunta di uno sfondo con opacità che non influisce sull'elemento padre

Ecco una buona raccolta di idee

Un intero mazzo di incredibili oggetti pseudo può fare | CSS-Tricks


Risposta 3:

Questi pseudo elementi vengono generalmente utilizzati per aggiungere elementi visivi (spesso immagini o caratteri speciali) prima o dopo il contenuto all'interno di un elemento.

Rudan ha dato alcuni buoni esempi. Un altro uso comune è nei menu. Ad esempio, è possibile utilizzare: after per posizionare una freccia verso il basso o un triangolo a destra degli elementi principali in un menu a discesa orizzontale. Ciò avviserebbe visivamente gli utenti di passare il mouse sopra quell'elemento per vedere i suoi figli.

Generalmente gli pseudo-elementi aggiungono decorazioni piuttosto che contenuti importanti. Poiché vengono aggiunti nel CSS, non verranno visualizzati nel codice sorgente dell'HTML.

Ciò rappresenta un problema per l'accessibilità. Ad esempio, le persone con disabilità visive che usano gli screen reader per non vedenti possono o meno ascoltare questo contenuto. Alcuni screen reader supportano gli pseudo elementi mentre altri no. Quindi si vorrebbe assicurarsi che non stessero usando lo pseudo per aggiungere tutto ciò che deve essere "visto" da tutti gli utenti.

Imparare ad usare: prima e dopo: gli pseudo-elementi nei CSS - Smashing Magazine

:: prima (: prima)

:: after / :: before | CSS-Tricks

Le tre principali cose che puoi fare con gli pseudo elementi CSS: prima e: dopo | Amazee Labs Drupal Development e Web Design Zurigo Austin Città del Capo

Contenuti generati da CSS e screen reader


Risposta 4:

Dal momento che sembri cercare, per esempio, posso dartene uno per come viene usato molto spesso in un'applicazione che sto creando: nei nostri moduli, sono richiesti alcuni campi. Invece di aggiungere

* Nome

ovunque desideriamo avere un asterisco rosso per identificare un campo come richiesto, scriviamo semplicemente

Nome di battesimo

La classe richiesta utilizzerà la pseudo classe, come hai identificato, per aggiungere l'asterisco e renderlo rosso. In questo modo, semplifica enormemente il nostro HTML, quindi è molto meno probabile che commettiamo un errore.


Risposta 5:

Beh, dipende davvero, puoi praticamente usarlo per "qualsiasi cosa". Puoi usarlo per creare una linea di separazione o qualche piccola modifica del design. Ad esempio, può essere utilizzato anche come sfondo di sovrapposizione per modali ecc. Esistono centinaia di casi d'uso.

usa: prima quando vuoi aggiungere qualcosa prima di un dato elemento e usa: dopo se vuoi posizionare qualcosa dopo un dato elemento.

È abbastanza semplice.