Indhold - CSS-tricks

Anonim

Den contentegenskab i CSS anvendes i forbindelse med de pseudo-elementer ::beforeog ::after. Det bruges til bogstaveligt at indsætte indhold. Der er fire værdityper, den kan have.

Snor

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

Så et element som dette:

 Chris

Ville gengive sådan:

Name: Chris

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

Tæller

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

Flere oplysninger om det.

Billede

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

Dette er bogstaveligt talt et billede på siden, som det ville være. Det kunne også være en gradient. Bemærk, at du ikke kan ændre dimensionerne på billedet, når det indsættes på denne måde. Du kan også indsætte et billede ved at bruge en tom streng til indholdet, gøre det display: blockpå en eller anden måde, dimensionere det og bruge background-image. På den måde kan du ændre størrelsen på det med background-size.

Attribut

Du kan bruge værdier (strenge, alligevel), der er taget lige fra attributter i 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 */ ) )

Den attr()funktion har ikke ”typer” lige nu, så du ikke kan passere en værdi ligesom 20px(kun strenge), men en dag!

Alternativ tekst

Specifikationen siger, at du kan bruge a /i syntaksen til at angive alternativ tekst. For eksempel…

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

Måske kunne du bruge det som ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Mere information

Indhold indsat på denne måde er ikke rigtig i DOM, så det har nogle begrænsninger. For eksempel kan du ikke vedhæfte en begivenhed direkte (kun) til et pseudo-element. Det er også inkonsekvent, om tekst indsat på denne måde læses af skærmlæsere (det er normalt i disse dage), eller hvis du kan vælge den (det er normalt ikke i disse dage).

  • Seje ting pseuedo-elementer kan gøre
  • Præsentation om pseudo-elementer
  • MDN Docs

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
4 2 9 12 3.1

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

For Opera url()understøttes kun i version 7+.