Pseudoelemente

Wenn Sie einen Artikel haben und der erste Buchstabe viel größer sein soll, wie erreichen Sie das?

Ein paar Absätze mit einer blauen Initiale

In CSS können Sie das Pseudo-Element ::first-letter verwenden, um diese Art von Designdetail 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 Pseudo-Element ist wie das Hinzufügen oder Targeting auf ein zusätzliches Element, ohne dass zusätzliches HTML hinzugefügt werden muss. Diese Beispiellösung mit ::first-letter ist eines von vielen Pseudoelementen. Sie haben verschiedene Funktionen. 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 ::after-Pseudoelement erstellen nur dann ein untergeordnetes Element in einem Element, wenn Sie eine content-Eigenschaft definieren.

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

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

content kann ein beliebiger String sein, auch ein leerer. Beachten Sie jedoch, dass alles andere als ein leerer String wahrscheinlich von einem Screenreader vorgelesen wird. Sie können ein Bild url hinzufügen. Dadurch wird ein Bild in Originalgröße eingefügt, sodass Sie die Größe nicht ändern können. Sie können auch ein counter einfügen.

Nachdem ein ::before- oder ::after-Element erstellt wurde, können Sie es beliebig gestalten. Sie können ein ::before- oder ::after-Element nur in ein Element einfügen, das untergeordnete Elemente zulässt (Elemente mit einem Dokumentenbaum). Elemente wie <img />, <video> und <input> funktionieren also nicht.

::first-letter

Dieses Pseudo-Element haben wir bereits zu Beginn der Lektion kennengelernt. Beachten Sie, dass nicht alle CSS-Properties beim Targeting auf ::first-letter verwendet werden können. Folgende Properties sind verfügbar:

  • color
  • background-Properties (z. B. background-image)
  • border-Properties (z. B. border-color)
  • float
  • font-Properties (z. B. font-size und font-weight)
  • Texteigenschaften wie text-decoration und word-spacing
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Mit dem Pseudo-Element ::first-line können Sie die erste Textzeile nur dann formatieren, wenn das Element mit angewendetem ::first-line einen display-Wert von block, inline-block, list-item, table-caption oder table-cell hat.

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

Wie beim Pseudoelement ::first-letter können Sie nur eine Teilmenge der CSS-Properties verwenden:

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

::backdrop

Wenn ein Element im Vollbildmodus angezeigt wird, z. B. ein <dialog> oder ein <video>, können Sie den Hintergrund (den Bereich zwischen dem Element und dem Rest der Seite) mit dem Pseudo-Element ::backdrop stylen:

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

::marker

Mit dem Pseudo-Element ::marker können Sie die Aufzählungspunkte oder Zahlen für ein Listenelement oder den Pfeil eines <summary>-Elements formatieren.

::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 wird nur ein kleiner Teil der CSS-Properties unterstützt:

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

Sie können das Markierungssymbol mithilfe der Property content ändern. So können Sie beispielsweise ein Plus- und ein Minuszeichen für den geschlossenen und leeren Zustand eines <summary>-Elements festlegen.

::selection

Mit dem Pseudo-Element ::selection können Sie den Stil des ausgewählten Texts festlegen.

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

Mit diesem Pseudo-Element können Sie den gesamten ausgewählten Text wie in der obigen Demo formatieren. Sie kann auch in Kombination mit anderen Auswahlelementen für eine spezifischere Auswahl verwendet werden.

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

Wie bei anderen Pseudoelementen sind nur einige CSS-Properties zulässig:

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

::placeholder

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 51.
  • Safari: 10.1.

Source

Sie können ein Hilfehinweis hinzufügen, um Elemente zu bilden, z. B. <input> mit einem placeholder-Attribut. Mit dem Pseudo-Element ::placeholder können Sie diesen Text formatieren.

input::placeholder {
  color: darkcyan;
}

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

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

::cue

Browser Support

  • Chrome: 26.
  • Edge: 79.
  • Firefox: 55.
  • Safari: 7.

Source

Als Letztes in dieser Übersicht über Pseudoelemente folgt das Pseudoelement ::cue. So kannst du die WebVTT-Cues, also die Untertitel eines <video>-Elements, formatieren.

Du kannst auch einen Selector an eine ::cue übergeben, um bestimmte Elemente in einer Bildunterschrift zu formatieren.

video::cue {
  color: yellow;
}

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

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

Wissen testen

Ihr Wissen über Pseudo-Elemente testen

Welche der folgenden Elemente sind keine Pseudoelemente?

::pencil
::marker
::first-paragraph
:active
::after
::before

Pseudoelemente finden Sie in einer HTML-Datei.

Richtig
Falsch