Contenuto - Trucchi CSS

Anonim

La contentproprietà in CSS viene utilizzata insieme agli pseudo-elementi ::beforee ::after. Viene utilizzato per inserire letteralmente il contenuto. Ci sono quattro tipi di valore che può avere.

Corda

.name::before ( content: "Name: "; )

Quindi un elemento come questo:

 Chris

Renderà in questo modo:

Name: Chris

Potrebbe anche essere una stringa vuota, che è comunemente vista in cose come clearfix.

Counter

div::before ( content: counter(my-counter); )

Maggiori informazioni a riguardo.

Immagine

div::before ( content: url(image.jpg.webp); )

Questa è letteralmente un'immagine sulla pagina come sarebbe. Potrebbe anche essere un gradiente. Notare che non è possibile modificare le dimensioni dell'immagine se inserita in questo modo. Puoi anche inserire un'immagine usando una stringa vuota per il contenuto, rendendola display: blockin qualche modo, ridimensionandola e usando background-image. In questo modo potresti ridimensionarlo con background-size.

Attributo

È possibile utilizzare valori (stringhe, comunque) che vengono presi direttamente dagli attributi nell'HTML.

 60 
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

La attr()funzione non ha ancora "tipi", quindi non puoi passare un valore come 20px(solo stringhe), ma un giorno!

Testo alternativo

La specifica dice che puoi usare un /nella sintassi per elencare il testo alternativo. Per esempio…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

Forse potresti usarlo come ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

Maggiori informazioni

Il contenuto inserito in questo modo non è realmente nel DOM, quindi presenta alcune limitazioni. Ad esempio, non puoi allegare un evento direttamente (solo) a uno pseudo-elementi. È anche incoerente se il testo inserito in questo modo viene letto dagli screen reader (di solito è di questi tempi) o se è possibile selezionarlo (di solito non è di questi tempi).

  • Cose interessanti che gli elementi pseuedo possono fare
  • Presentazione sugli pseudo elementi
  • Documenti MDN

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
4 2 9 12 3.1

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Per Opera, url()supportato solo nella versione 7+.