Innhold - CSS-triks

Anonim

Den contentegenskap i CSS brukes i forbindelse med de pseudo-elementer ::beforeog ::after. Den brukes til å bokstavelig talt sette inn innhold. Det er fire verdityper det kan ha.

String

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

Så et element som dette:

 Chris

Ville gjengi slik:

Name: Chris

Det kan også være en tom streng, som ofte sees i ting som clearfix.

Disk

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

Mer informasjon om det.

Bilde

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

Dette er bokstavelig talt et bilde på siden som det ville være. Det kan også være en gradient. Merk at du ikke kan endre dimensjonene på bildet når du setter det inn på denne måten. Du kan også sette inn et bilde ved å bruke en tom streng for innholdet, lage det display: blockpå en eller annen måte, dimensjonere det og bruke background-image. På den måten kan du endre størrelsen på den med background-size.

Egenskap

Du kan bruke verdier (strenger, uansett) som er hentet rett fra attributter i HTML-en.

 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 */ ) )

Den attr()funksjonen har ikke “typer” ennå, så du kan ikke passere en verdi som 20px(bare strenger), men en dag!

Alternativ tekst

Spesifikasjonen sier at du kan bruke a /i syntaksen for å liste opp alternativ tekst. For eksempel…

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

Kanskje du kan bruke det som ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Mer informasjon

Innhold satt inn på denne måten er egentlig ikke i DOM, så det har noen begrensninger. For eksempel kan du ikke knytte en hendelse direkte (bare) til et pseudo-element. Det er også inkonsekvent om tekst som er satt inn på denne måten blir lest av skjermlesere (det er vanligvis i disse dager) eller om du kan velge den (det er vanligvis ikke i disse dager).

  • Kule ting pseuedo-elementer kan gjøre
  • Presentasjon om pseudo-elementer
  • MDN Docs

Nettleserstøtte

Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.

Desktop

Chrome Firefox DVS Kant Safari
4 2 9 12 3.1

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

For Opera url()støttes bare i versjon 7+.