Pseudoelemente

The CSS Podcast – 014: Pseudo-Elemente

Angenommen, der erste Buchstabe soll ein deutlich größeres Drop-Cap sein. Wie können Sie das erreichen?

In CSS können Sie das Pseudoelement ::first-letter verwenden, um diese Art von Designdetails zu erzielen.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Ein Pseudoelement ist mit dem Hinzufügen oder Targeting eines zusätzlichen Elements vergleichbar, ohne weiteren HTML-Code hinzufügen zu müssen. Diese Beispiellösung mit ::first-letter ist eines von vielen Pseudoelementen. Es gibt verschiedene Rollen. In dieser Lektion erfahren Sie, welche Pseudoelemente verfügbar sind und wie Sie sie verwenden können.

::before und ::after

Sowohl das Pseudoelement ::before als auch das Pseudoelement ::after erstellen nur dann ein untergeordnetes Element innerhalb eines Elements, wenn Sie ein Attribut content definieren.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

Der content kann ein beliebiger String sein – auch ein leerer String –. Beachten Sie jedoch, dass wahrscheinlich alles andere als ein leerer String von einem Screenreader vorgelesen wird. Sie können das Bild url hinzufügen. Damit wird ein Bild in Originalgröße eingefügt und lässt sich nicht in der Größe anpassen. Sie können auch ein counter einfügen.

Nachdem ein ::before- oder ::after-Element erstellt wurde, können Sie es ohne Einschränkungen gestalten. Sie können ein ::before- oder ::after-Element nur in ein Element einfügen, das untergeordnete Elemente (Elemente mit einer Dokumentstruktur) akzeptiert. Elemente wie <img />, <video> und <input> funktionieren also nicht.

::first-letter

Dieses Pseudoelement ist uns schon zu Beginn der Lektion bekannt. Beachten Sie, dass nicht alle Preisvergleichsportal-Properties für das Targeting auf ::first-letter verwendet werden können. Folgende Attribute sind verfügbar:

• color
• background Unterkünfte (z. B. background-image)
• border Unterkünfte (z. B. border-color)
• float
• font Unterkünfte (z. B. font-size und font-weight)
• Texteigenschaften (z. B. text-decoration und word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Mit dem Pseudoelement ::first-line können Sie die erste Textzeile nur dann gestalten, wenn das Element, auf das ::first-line angewendet wurde, den display-Wert block, inline-block, list-item, table-caption oder table-cell hat.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Wie das Pseudoelement ::first-letter können Sie nur einen Teil der CSS-Eigenschaften verwenden:

• color
• background Unterkünfte
• font Unterkünfte
• text Unterkünfte

::backdrop

Wenn eines Ihrer Elemente im Vollbildmodus angezeigt wird, z. B. <dialog> oder <video>, können Sie den Hintergrund – den Abstand zwischen dem Element und dem Rest der Seite – mit dem Pseudoelement ::backdrop gestalten:

video::backdrop {
  background-color: goldenrod;
}

::marker

Mit dem Pseudoelement ::marker können Sie das Aufzählungszeichen oder die Nummer für ein Listenelement oder den Pfeil eines <summary>-Elements gestalten.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Für ::marker werden nur wenige CSS-Properties unterstützt:

• color
• content
• white-space
• font Unterkünfte
• animation- und transition-Properties

Sie können das Markierungssymbol mithilfe der Eigenschaft content ändern. Damit kannst du beispielsweise ein Plus- und Minussymbol für den geschlossenen und leeren Zustand eines <summary>-Elements festlegen.

::selection

Mit dem Pseudoelement ::selection können Sie das Aussehen des ausgewählten Textes gestalten.

::selection {
  background: green;
  color: white;
}

Dieses Pseudoelement kann verwendet werden, um den gesamten ausgewählten Text zu gestalten, wie in der obigen Demo gezeigt. Es kann auch in Kombination mit anderen Selektoren für einen spezifischeren Auswahlstil verwendet werden.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Wie bei anderen Pseudoelementen ist nur ein Teil der CSS-Eigenschaften zulässig:

• color
• background-color, aber nicht background-image
• text Unterkünfte

::placeholder

Sie können Formularelementen wie <input> mit einem placeholder-Attribut einen Hilfshinweis hinzufügen. Mit dem Pseudoelement ::placeholder können Sie diesen Text gestalten.

input::placeholder {
  color: darkcyan;
}

::placeholder unterstützt nur einen Teil der CSS-Regeln:

• color
• background Unterkünfte
• font Unterkünfte
• text Unterkünfte

::cue

Das letzte Element in dieser Tour zu Pseudoelementen ist das Pseudoelement ::cue. So kannst du die WebVTT-Cues gestalten, bei denen es sich um die Untertitel eines <video>-Elements handelt.

Sie können auch einen Selektor an einen ::cue übergeben, sodass Sie bestimmte Elemente innerhalb eines Untertitels gestalten können.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Wissen testen

Testen Sie Ihr Wissen über Pseudoelemente