Content: Grundlagen, Einsatz und CSS-Praxis erklärt

Content begegnet dir jeden Tag – in Texten, Videos, Bildern und sogar im Code einer Website. Du nutzt ihn, teilst ihn und erstellst ihn vielleicht selbst. Doch was genau bedeutet dieser Begriff eigentlich?

Content bezeichnet Inhalte – also Themen, Informationen oder Materialien, die in einem Medium enthalten sind, und kann auch einen Zustand von Zufriedenheit beschreiben. Je nach Zusammenhang steht das Wort für den Inhalt einer Webseite, die Bestandteile einer Box oder ein Gefühl innerer Ruhe.

In diesem Artikel klärst du die genaue Definition, lernst verschiedene Arten von Content kennen und erfährst, wie das Content-Property in CSS funktioniert. Du siehst außerdem, wie ::before und ::after Inhalte einfügen, worauf du bei Barrierefreiheit achten solltest und welche Best Practices im Code wirklich sinnvoll sind.

Was ist Content?

Content beschreibt sowohl konkrete Inhalte als auch deren Bedeutung und Zweck. Du verstehst den Begriff nur richtig, wenn du Herkunft, Nutzung im Alltag und die sprachlichen Unterschiede kennst.

Bedeutung und Wortherkunft

Das Wort Content stammt vom lateinischen contentum ab. Es bedeutet „Inhalt“ oder „das, was enthalten ist“.

Im Englischen nutzt man „content“ als Nomen für Dinge, die sich in etwas befinden. Zum Beispiel: der Inhalt eines Buches, einer Flasche oder einer Website.

Im Deutschen hat sich der Begriff vor allem im digitalen Bereich durchgesetzt. Wenn du heute von Content sprichst, meinst du meist digitale Inhalte wie Texte, Videos, Bilder oder Podcasts.

Wichtig ist: Content beschreibt nicht nur das Medium, sondern das, was darin steckt. Bei einer Website ist das nicht das Design, sondern die Informationen, Texte und Medien, die du dort findest.

Verschiedene Bedeutungen im Kontext

Je nach Zusammenhang kann „Content“ unterschiedliche Bedeutungen haben. Du musst also immer auf den Kontext achten.

Hier sind die wichtigsten Verwendungen:

• Inhalt eines Gegenstands:
  Der Content einer Box ist das, was sich darin befindet.
• Thema oder Aussage:
  Der Content einer Rede ist die zentrale Botschaft.
• Digitale Inhalte:
  Blogartikel, Social-Media-Posts, Videos oder Online-Kurse zählen als Content.
• Messbarer Anteil:
  In der Wissenschaft spricht man vom Wassergehalt oder Proteingehalt, also vom „Content“ eines Stoffes.

Im Marketing meint Content meist Inhalte, die informieren, unterhalten oder überzeugen sollen. Du erstellst Content, um eine klare Botschaft zu vermitteln und eine Reaktion auszulösen.

Unterschied zwischen Content und Contents

Die Begriffe Content und Contents sehen ähnlich aus, bedeuten aber nicht dasselbe.

Begriff	Bedeutung
Content	Inhalt im Allgemeinen oder als Sammelbegriff
Contents	Mehrere einzelne Bestandteile oder der konkrete Inhalt eines Behälters

„Content“ nutzt du meist als nicht zählbares Nomen. Du sagst zum Beispiel: „Die Website hat guten Content.“

„Contents“ steht oft im Plural. Ein typisches Beispiel ist die „Table of Contents“, also das Inhaltsverzeichnis eines Buches.

Wenn du über digitale Inhalte sprichst, verwendest du fast immer „Content“. „Contents“ passt eher, wenn du einzelne Bestandteile aufzählst oder den genauen Inhalt eines Gegenstands beschreibst.

Arten von Content

Content kann informieren, Vertrauen aufbauen oder zum Handeln bewegen. Je nach Ziel nutzt du Texte, visuelle Medien oder interaktive Formate, die jeweils eigene Stärken haben.

Textbasierte Inhalte

Text ist die Basis vieler Inhalte im Web. Du nutzt ihn für Blogartikel, Ratgeber, Produktbeschreibungen, Whitepaper, E-Books, Newsletter oder FAQ-Seiten.

Gute Texte beantworten klare Fragen. Sie erklären ein Thema Schritt für Schritt und helfen dir, in Suchmaschinen gefunden zu werden.

Typische textbasierte Formate sind:

• Blogartikel: Erklären Themen ausführlich und stärken deine Sichtbarkeit.
• Landingpages: Führen gezielt zu einer Handlung, etwa einer Anfrage.
• Whitepaper: Bieten tiefes Fachwissen für konkrete Probleme.
• FAQ-Seiten: Klären häufige Fragen und verbessern die Nutzerführung.

Achte auf klare Struktur, Zwischenüberschriften und kurze Absätze. So bleibt dein Text verständlich und gut lesbar.

Texte eignen sich besonders, wenn du komplexe Inhalte vermitteln oder Vertrauen aufbauen willst. Sie wirken langfristig, vor allem wenn du sie regelmäßig aktualisierst.

Grafische und audiovisuelle Inhalte

Visuelle Inhalte ziehen schnell Aufmerksamkeit auf sich. Du nutzt sie vor allem auf Social Media, in Präsentationen oder auf Landingpages.

Dazu gehören:

• Bilder und Infografiken
• Videos auf YouTube oder deiner Website
• Reels und Kurzvideos auf Instagram oder TikTok
• Podcasts

Ein Video kann ein Produkt in zwei Minuten zeigen, wofür ein Text viele Absätze braucht. Infografiken fassen Daten klar und übersichtlich zusammen.

Audiovisuelle Inhalte stärken deine Marke. Menschen erkennen dich schneller wieder, wenn du mit Bild, Ton und Stil arbeitest.

Plane diese Formate gezielt. Produktion und Schnitt kosten Zeit, doch gut gemachte Inhalte kannst du mehrfach einsetzen, etwa als Clip, Beitrag und Newsletter-Teaser.

Interaktive und dynamische Inhalte

Interaktive Inhalte binden deine Zielgruppe aktiv ein. Du gibst nicht nur Informationen, sondern forderst eine Reaktion.

Beispiele sind:

• Umfragen und Quizze
• Rechner und Tools
• Interaktive Grafiken
• Webinare mit Live-Chat

Solche Formate erhöhen die Verweildauer auf deiner Website. Nutzer klicken, testen oder geben Daten ein.

Ein Kostenrechner auf einer Leistungsseite hilft zum Beispiel bei einer ersten Einschätzung. Ein Quiz kann Interesse wecken und gleichzeitig Daten für dein Marketing liefern.

Dynamische Inhalte wie personalisierte Empfehlungen passen sich dem Verhalten deiner Besucher an. So wird dein Content relevanter und zielgerichteter.

Das Content-Property in CSS

Mit dem content property steuerst du, welche Inhalte ein Element oder ein Pseudo-Element zusätzlich anzeigt oder ersetzt. Du fügst damit Text, Bilder, Zähler oder Attributwerte ein, ohne das HTML zu ändern.

Überblick über das content Property

Das css content Property nutzt du meist mit ::before und ::after. Damit fügst du Inhalte vor oder nach dem eigentlichen Elementinhalt ein.

Diese Inhalte entstehen nur durch CSS. Sie stehen nicht im HTML-Dokument und gehören nicht zum DOM. Screenreader lesen sie daher nicht immer zuverlässig vor. Wenn der Inhalt wichtig ist, solltest du ihn direkt im HTML einfügen.

Du kannst mit dem content property auch ganze Elemente ersetzen. In diesem Fall gibst du zum Beispiel ein Bild per url() an. Standardmäßig steht der Wert auf normal. Bei ::before und ::after bedeutet das meist, dass kein zusätzlicher Inhalt erzeugt wird.

Das Property wird nicht vererbt. Es wirkt nur auf das jeweilige Element oder Pseudo-Element.

Verfügbare Werte für content

Das content property bietet dir verschiedene Wertetypen. Die wichtigsten siehst du hier:

• normal – Standardwert
• none – erzeugt keinen Inhalt
• Zeichenketten – z. B. "Neu!"
• Bilder – z. B. url("bild.png") oder Gradients
• Zähler – mit counter() oder counters()
• attr() – liest einen Attributwert aus dem HTML
• Anführungszeichen – open-quote, close-quote

Zeichenketten setzt du in einfache oder doppelte Anführungszeichen. Mehrere Strings hängen automatisch aneinander.

Mit counter() greifst du auf CSS-Zähler zu, die du vorher mit counter-reset und counter-increment definierst. So kannst du automatische Nummerierungen erzeugen.

Mit attr() zeigst du zum Beispiel den Wert von href oder title an. Fehlt das Attribut, erscheint ein leerer String.

CSS Syntax und Beispiele

Die Grundsyntax des css content sieht so aus:

selector::before {
  content: "Text";
}

Du kannst Text nach einem Element einfügen:

.new::after {
  content: " Neu!";
  color: red;
}

Hier ersetzt du ein Element durch ein Bild:

.logo {
  content: url("logo.png");
}

Einen Attributwert bindest du so ein:

a::after {
  content: " (" attr(href) ")";
}

Mehrere Werte kombinierst du in einer Zeile. Zum Beispiel Text und Bild:

.notice::before {
  content: "⚠ " "Wichtig";
}

So steuerst du gezielt, was im Browser erscheint, ohne dein HTML zu verändern.

Pseudo-Elemente ::before und ::after

Mit den Pseudo-Elementen ::before und ::after fügst du Inhalte per CSS ein, ohne dein HTML zu ändern. Du steuerst sie über die Eigenschaft content und platzierst sie vor oder nach dem eigentlichen Inhalt eines Elements.

Funktionsweise von Pseudo-Elementen

Ein pseudo-element wie ::before oder ::after gehört immer zu einem bestehenden HTML-Element. Es erzeugt zusätzlichen Inhalt innerhalb dieses Elements, entweder vor oder nach dem normalen Inhalt.

Du nutzt es so:

p::before {
  content: "Hinweis: ";
}

Ohne die Eigenschaft content wird nichts angezeigt. Du kannst als Wert zum Beispiel nutzen:

• Text: "Hallo"
• Bild: url(bild.png)
• Leerwert: ""
• Zähler: counter(li)
• Zeilenumbruch: "Zeile 1 \A Zeile 2"

::after wird im Dokumentenfluss später gerendert als ::before. Wenn beide übereinander liegen und du keinen z-index setzt, liegt ::after oben.

Moderne Browser unterstützen die Schreibweise mit doppeltem Doppelpunkt (::). Die einfache Variante (:before) funktioniert ebenfalls, gilt aber als ältere Syntax.

Praxisbeispiele mit ::before

Mit ::before ergänzt du Inhalte, die vor dem eigentlichen Text stehen sollen. Du kannst so Icons, Symbole oder feste Hinweise einfügen.

Beispiel für ein Icon vor einem Link:

a.download::before {
  content: "⬇ ";
}

Du hältst dein HTML sauber, weil du kein zusätzliches <span> brauchst. Das eignet sich gut für:

• Pfeile in Menüs
• Anführungszeichen bei Zitaten
• Status-Hinweise wie „Neu“

Für dekorative Elemente nutzt du oft content: "" und arbeitest mit background-image, width und height. So erzeugst du Formen oder Grafiken nur mit CSS.

Achte darauf, wichtige Inhalte nicht nur über Pseudo-Elemente bereitzustellen. Screenreader erkennen sie nicht immer zuverlässig.

Praxisbeispiele mit ::after

Mit ::after platzierst du Inhalte am Ende eines Elements. Du nutzt es oft für visuelle Ergänzungen oder technische Hilfen.

Ein typisches Beispiel ist ein automatisches Symbol hinter externen Links:

a.extern::after {
  content: " ↗";
}

Auch Trennzeichen in Listen setzt du so um:

li::after {
  content: ", ";
}
li:last-child::after {
  content: "";
}

Früher hast du ::after oft für sogenannte Clearfix-Lösungen genutzt, um Floats zu beenden. Dabei setzt du content: "" und steuerst das Layout über zusätzliche CSS-Regeln.

Setze ::after gezielt ein, wenn der Zusatz logisch nach dem Inhalt stehen soll. So steuerst du Struktur und Darstellung klar über CSS, ohne dein Markup zu überladen.

Barrierefreiheit und Content

Barrierefreier Content sorgt dafür, dass Menschen mit unterschiedlichen Fähigkeiten deine Inhalte wahrnehmen, bedienen und verstehen können. Du erreichst damit mehr Nutzer und erfüllst zugleich klare Anforderungen an digitale accessibility.

Bedeutung für Web Accessibility

Barrierefreiheit im Content bedeutet, dass du Inhalte so aufbereitest, dass sie für möglichst viele Menschen zugänglich sind. Dazu zählen Menschen mit Seh‑, Hör‑ oder kognitiven Einschränkungen ebenso wie Personen, die einfache Sprache benötigen.

Die WCAG 2.2 geben dir dafür einen klaren Rahmen. Sie beruhen auf vier Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Für deinen Content sind vor allem diese Punkte wichtig:

• Textalternativen für Bilder, Grafiken und Icons
• Untertitel und Transkripte für Audio und Video
• Klare Überschriftenstruktur mit H1 bis H6
• Ausreichende Farbkontraste (mindestens 4,5:1 für Text)
• Verständliche Sprache auf dem Niveau von etwa 8. Klasse

Du solltest Informationen nie nur über Farbe oder ein einzelnes Sinnesorgan vermitteln. Ein Screenreader muss alle wichtigen Inhalte auslesen können.

Auch die richtige Sprachkennzeichnung im Code zählt. Sie hilft assistiven Technologien, Texte korrekt auszugeben.

Nutzung von Content-Property im barrierefreien Webdesign

Content ist nicht nur Text. Jede Content-Property – also Bild, Video, Audio, PDF oder interaktive Grafik – braucht eine barrierefreie Umsetzung.

Bei Bildern setzt du präzise ALT-Texte, die den Informationsgehalt beschreiben. Dekorative Bilder markierst du entsprechend, damit Screenreader sie überspringen.

Bei Videos stellst du bereit:

• Untertitel für gesprochene Inhalte
• Ein Transkript für reine Audioinhalte
• Bei Bedarf eine Audiodeskription für visuelle Informationen

Achte im Webdesign darauf, dass Struktur und Layout auch ohne visuelle Gestaltung funktionieren. Überschriften, Listen und Tabellen müssen korrekt im HTML ausgezeichnet sein.

Für PDFs gilt das Gleiche. Nutze strukturierte Tags, klare Lesereihenfolgen und echte Textinhalte statt eingebetteter Textbilder.

So verbindest du Content und accessibility direkt im Designprozess – nicht als Zusatz, sondern als festen Bestandteil deiner Arbeit.

Best Practices für den Einsatz von Content in CSS

Wenn du CSS richtig einsetzt, bleibt dein HTML sauber und dein Design flexibel. Du steuerst Inhalte gezielt über Styles, ohne Struktur und Bedeutung deiner Seite zu zerstören.

Trennung von Inhalt und Design

Du solltest Inhalt und Design klar trennen. HTML liefert die Struktur und Bedeutung, CSS steuert das Aussehen. Das content-Property gehört nur ins Design, nicht in den eigentlichen Seiteninhalt.

Nutze ::before und ::after, um dekorative Inhalte einzufügen. Dazu zählen Symbole, Anführungszeichen oder kleine Hinweise, die das Layout ergänzen. Wichtige Texte wie Überschriften, Produktinfos oder Call-to-Action-Texte gehören immer ins HTML.

Warum das wichtig ist:

• Inhalte im CSS sind im Quellcode nicht direkt sichtbar
• Screenreader erfassen sie oft nicht zuverlässig
• Suchmaschinen bewerten sie anders als echten HTML-Text

Halte dein Stylesheet sauber und gut organisiert. Arbeite mit klaren Klassen statt mit IDs für wiederkehrende Elemente. So bleibst du flexibel und vermeidest doppelten Code.

Typische Anwendungsfälle und Limitierungen

Das content-Property eignet sich für klare, kleine Ergänzungen. Typische Beispiele sind:

• Automatische Anführungszeichen bei Zitaten
• Icons vor Links oder Buttons
• Status-Hinweise wie „Neu“ oder „Extern“
• Nummerierungen bei Listen oder Schritten

Du kannst auch attr() nutzen, um Attributwerte anzuzeigen, etwa content: attr(data-label);. Das hilft bei technischen Labels oder Zusatzinfos.

Beachte aber klare Grenzen. Du kannst mit content keinen komplexen HTML-Code erzeugen. Interaktive Elemente wie Buttons oder Formulare gehören nicht ins CSS.

Setze CSS nicht ein, um echten Inhalt zu verstecken oder zu ersetzen. Das erschwert Wartung und kann die Barrierefreiheit verschlechtern. Verwende CSS für Darstellung und kleine Ergänzungen, nicht für zentrale Informationen.