Inhalt - CSS-Tricks

Anonim

Die contentEigenschaft in CSS wird in Verbindung mit den Pseudoelementen ::beforeund verwendet ::after. Es wird verwendet, um Inhalte buchstäblich einzufügen. Es gibt vier Werttypen.

String

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

Dann ein Element wie dieses:

 Chris

Würde so rendern:

Name: Chris

Es könnte sich auch um eine leere Zeichenfolge handeln, die häufig in Dingen wie dem Clearfix verwendet wird.

Zähler

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

Weitere Informationen dazu.

Bild

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

Dies ist buchstäblich ein Bild auf der Seite, wie es sein würde. Es könnte auch ein Gefälle sein. Beachten Sie, dass Sie die Abmessungen des Bildes beim Einfügen auf diese Weise nicht ändern können. Sie können ein Bild auch einfügen, indem Sie eine leere Zeichenfolge für den Inhalt verwenden, es display: blockauf irgendeine Weise erstellen, seine Größe ändern und verwenden background-image. Auf diese Weise können Sie die Größe ändern background-size.

Attribut

Sie können Werte (ohnehin Zeichenfolgen) verwenden, die direkt aus Attributen im HTML übernommen werden.

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

Die attr()Funktion hat noch keine "Typen", daher können Sie keinen Wert wie 20px(nur Zeichenfolgen) übergeben, aber eines Tages!

alternativer Text

Die Spezifikation besagt, dass Sie /in der Syntax ein verwenden können, um alternativen Text aufzulisten. Zum Beispiel…

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

Vielleicht könnten Sie es wie ... verwenden

 

    

  • Make Bed
    • 

  • Grocery Shop
    • 

  • Sweep Driveway
    • 



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

Mehr Informationen

Auf diese Weise eingefügter Inhalt befindet sich nicht wirklich im DOM, daher gibt es einige Einschränkungen. Beispielsweise können Sie ein Ereignis nicht direkt (nur) an Pseudoelemente anhängen. Es ist auch inkonsistent, ob auf diese Weise eingefügter Text von Bildschirmleseprogrammen gelesen wird oder nicht (dies ist normalerweise heutzutage der Fall) oder ob Sie ihn auswählen können (dies ist heutzutage normalerweise nicht der Fall).

  • Coole Dinge, die Pseuedo-Elemente tun können
  • Präsentation über Pseudoelemente
  • MDN Docs

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
4 2 9 12 3.1

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 2.1 3.2

Für Opera url()nur in Version 7+ unterstützt.