Innehåll - CSS-tricks

Anonim

Den contentegendom i CSS används tillsammans med pseudo elementen ::beforeoch ::after. Den används för att bokstavligen infoga innehåll. Det finns fyra värdetyper det kan ha.

Sträng

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

Sedan ett element som detta:

 Chris

Skulle göra så här:

Name: Chris

Det kan också vara en tom sträng, som ofta ses i saker som clearfix.

Disken

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

Mer information om det.

Bild

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

Detta är bokstavligen en bild på sidan som skulle vara. Det kan också vara en lutning. Observera att du inte kan ändra bildens mått när du sätter in det på detta sätt. Du kan också infoga en bild genom att använda en tom sträng för innehållet, göra den display: blockpå något sätt, dimensionera den och använda background-image. På det sättet kan du ändra storlek på den med background-size.

Attribut

Du kan använda värden (strängar, i alla fall) som hämtas direkt från attribut 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 */ ) )

Det attr()fungerar inte att ha ”typer” ännu, så att du inte kan passera ett värde som 20px(bara strängar), men en dag!

Alternativ text

Specifikationen säger att du kan använda a /i syntaxen för att lista alternativ text. Till exempel…

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

Du kanske kan använda det som ...

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Mer information

Innehåll infogat på detta sätt finns inte riktigt i DOM, så det har vissa begränsningar. Du kan till exempel inte bifoga en händelse direkt (endast) till ett pseudo-element. Det är också inkonsekvent om text infogad på det här sättet läses av skärmläsare (det är vanligtvis nuförtiden) eller om du kan välja den (det är vanligtvis inte idag).

  • Häftiga saker som pseuedo-element kan göra
  • Presentation om pseudoelement
  • MDN-dokument

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
4 2 9 12 3.1

Mobil / surfplatta

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

För Opera url()stöds endast i version 7+.