CSS vor und CSS nach - Verwendung der Content-Eigenschaft

Die contentEigenschaft in CSS definiert den Inhalt eines Elements. Sie haben vielleicht gehört, dass diese Eigenschaft nur für die ::beforeund ::after-Elemente gilt. In diesem Artikel werden verschiedene Anwendungsfälle für die contentEigenschaft untersucht, auch außerhalb von Pseudoelementen.

Voraussetzung

Da die meisten Anwendungsfälle für die contentEigenschaft Pseudoelemente betreffen, würde ich vorschlagen, dass Sie mit der Funktionsweise der ::beforeund der ::afterPseudoelemente vertraut sind . Hier ist ein großartiger Artikel, um Sie auf den neuesten Stand zu bringen:

  • CSS-Pseudoelemente - Vor und nach Selektoren erklärt

Akzeptierte Werte

Schauen wir uns zunächst alle akzeptierten Werte der contentEigenschaft an.

  • normal: Dies ist der Standardwert. Berechnet nonebei Verwendung mit Pseudoelementen .
  • none: Ein Pseudoelement wird nicht generiert.
  • : Setzt den Inhalt auf die angegebene Zeichenfolge. Diese Zeichenfolge kann Unicode-Escape-Sequenzen enthalten. Zum Beispiel das Copyright-Symbol : \\000A9.
  • Stellt die Inhalte eines Bildes oder Gradienten: url()oder linear-gradient().
  • open-quote| close-quote: Setzt den Inhalt auf das entsprechende Anführungszeichen, auf das in der Eigenschaft verwiesen wird quotes.
  • no-open-quote| no-close-quote: Entfernt ein Anführungszeichen aus dem ausgewählten Element, erhöht oder verringert jedoch weiterhin die Verschachtelungsebene, auf die in der quotesEigenschaft verwiesen wird .
  • attr(*attribute*): Legt den Inhalt als Zeichenfolgenwert des ausgewählten Attributs für ausgewählte Elemente fest.
  • counter(): Legt den Inhalt als Wert von a fest counter, normalerweise als Zahl.

String

Eines der grundlegendsten Beispiele wäre die Verwendung des Hinzufügens von Zeichenfolgeninhalten vor oder nach einem Element. In diesem Beispiel fügen wir vor einem Link ein Link-Symbol hinzu und fügen danach die URL für den Link hinzu.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

Beachten Sie das Leerzeichen nach dem Unicode-Zeichen im ::beforePseudoelement und vor der ersten Klammer im ::afterPseudoelement. Dadurch wird Platz zwischen diesen und dem übergeordneten Element geschaffen.

Alternativ können Sie paddingoder marginzu den Pseudoelementen hinzufügen, um eine Trennung hinzuzufügen.

Grundlegende Zitate

Mit der contentEigenschaft können Sie Anführungszeichen vor und / oder nach Elementen hinzufügen. Jetzt haben wir in HTML das Tag. Dadurch werden auch Anführungszeichen um den Inhalt hinzugefügt. Mit der contentEigenschaft können wir jedoch mehr Kontrolle über die Implementierung haben.

Hier ist das grundlegendste Beispiel für das Hinzufügen von Anführungszeichen:

Sie können dies auch mithilfe des HTML-Tags erreichen . Aber vielleicht möchten wir das Zitat anders gestalten. Fügen wir also nur das Eröffnungszitat und nicht das Endzitat hinzu. Und lassen Sie uns auch das Eröffnungszitat stylen.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

Das Ergebnis:

Bild zeigt ein einzelnes Zitat oben links im Absatz

Erweiterte Zitate

Wir können auch angeben , wo wir noch nicht zitiert werden soll. Beispielsweise zitieren Sie möglicherweise jemanden, der eine andere Person zitiert. Sie würden also Anführungszeichen in Anführungszeichen haben, was für den Leser verwirrend werden kann.

Im folgenden CodePen verwenden wir HTML- Tags und geben dann an, welche Tags die Anführungszeichen nicht anzeigen sollen.

Auf den ersten Blick könnte man denken, wir sollten das Tag nur bei Bedarf entfernen . Indem Sie jedoch angeben, wo ein Anführungszeichen nicht noch erhöht oder verringert werden soll, wird die Verschachtelungsebene, auf die in der quotesEigenschaft verwiesen wird, erhöht oder verringert .

Um dies zu erklären, müssen wir die quotesEigenschaft verstehen . Dies ist einfach ein "Array" von Zeichen, die beim Zitieren verwendet werden sollten. Hier ist ein Beispiel:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

Dies sind Sätze von Anführungszeichen. Der erste Satz wird für die oberste Anführungszeichenstufe verwendet. Der zweite Satz wird für das erste verschachtelte Zitat verwendet. Der dritte Satz wird für das zweite verschachtelte Zitat verwendet. Und so weiter, wenn mehr Sets enthalten wären.

Nachdem wir die quotesEigenschaft verstanden haben, kann ich erklären, wie die no-open-quoteund no-close-quoteEigenschaften funktionieren.

For each level of quotes, we can assign different sets of characters to use for the quotes. By specifying where a quote should not be still increments or decrements the nesting level referenced from the quotes property.

Take a look at the example below. You will see that the second level of quotes is skipped.

Attributes

Attributes can be used to pass content from HTML into the CSS content property. We actually used this already in the link example where we used the href attribute to include the URL string as part of our content.

A perfect use case for this is a tooltip. You can add a title attribute to an element in HTML to have a simple, built-in tooltip on hover. But to customize this, we can use a data attribute on our HTML tag and then use the content property to add a tooltip.

In this example, we use the attribute data-tooltip from our HTML element to pass the value into our tooltip. For the pointer of the tooltip, we set the content to "", as content is required to render a ::before or ::after pseudo-element.

Counters

The counter() CSS function returns a string representing the current value of the named counter. In the following example we have an ordered list that we will add content using a counter.

    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    Without getting too in-depth on the counter function, we have to first initiate the counter on the ol element. We can name this whatever we would like. Then we tell the counter to increment on each li element. And lastly, we set the content of the li::after.

    Here's the result:

    Bestellliste

    Sie können dies verwenden, um den Inhalt in jedem Listenelement anzupassen, für das eine entsprechende Nummer erforderlich ist. Oder Sie können dies verwenden, um das Listenelement selbst anzupassen. Sie können beispielsweise die Standardnummerierung entfernen und ein benutzerdefiniertes Nummerierungssystem implementieren.

    Bilder

    Bilder und Verläufe können mit der contentEigenschaft verwendet werden. Das ist ziemlich einfach. Hier ist ein Beispiel, das beides verwendet:

    Für die Barrierefreiheit gibt es auch die Möglichkeit, alternativen Text für das Bild hinzuzufügen. Diese Funktion wird jedoch nicht vollständig unterstützt.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    Hinweis: Dies wird in Firefox, IE und Safari nicht unterstützt. Außerdem funktioniert der Verlauf in Firefox nicht.

    Außerhalb von Pseudoelementen

    Korrekt! Sie können die contentEigenschaft außerhalb der Pseudoelemente ::beforeund verwenden ::after. Die Verwendung ist jedoch begrenzt und nicht in allen Browsern vollständig kompatibel.

    Der am besten kompatible Anwendungsfall wäre das Ersetzen eines Elements.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    Hinweis: Das Ersetzen wird im IE nicht unterstützt.

    Fazit

    Meistens werden Sie content: ""in den ::beforeund ::afterPseudo-Elementen gefunden. Aber die contentEigenschaft hat viele nützliche Anwendungen.

    Meiner Meinung nach ist es am besten, es zum Aktualisieren von Massenelementen zu verwenden. Wenn Sie vor jedem Link auf Ihrer Site ein Symbol hinzufügen möchten, ist es viel einfacher, es über die contentEigenschaft hinzuzufügen, als es jedem Element im HTML-Dokument hinzuzufügen.

    Danke fürs Lesen!

    Vielen Dank für das Lesen dieses Artikels. Hoffentlich hat es Ihnen geholfen, besser zu verstehen, wie die contentEigenschaft in CSS funktioniert.

    Jesse Hall (codeSTACKr)Ich bin Jesse aus Texas. Schauen Sie sich meine anderen Inhalte an und lassen Sie mich wissen, wie ich Ihnen auf Ihrem Weg zum Webentwickler helfen kann.

    • Abonniere mein YouTube
    • Sag Hallo! Instagram | Twitter
    • Melden Sie sich für meinen Newsletter an