Pseudoelemente

The CSS Podcast – 014: Pseudoelemente

Wenn Sie einen Inhaltsartikel haben, und der erste Buchstabe sollte ein viel größeres Drop-Cap sein – Wie erreichen Sie das?

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

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 dass mehr HTML-Code hinzugefügt werden muss. In dieser Beispiellösung mit ::first-letter ist eines von vielen Pseudoelementen. Sie haben verschiedene Rollen, In dieser Lektion erfahren Sie, welche Pseudoelemente verfügbar sind und wie Sie sie verwenden können.

::before und ::after

Sowohl die ::before und ::after Pseudoelemente erstellen nur dann ein untergeordnetes Element innerhalb eines Elements, wenn Sie eine content-Eigenschaft definieren.

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

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

content kann ein beliebiger String sein - sogar ein leeres - Beachten Sie jedoch, dass ein Screenreader wahrscheinlich alles andere als eine leere Zeichenfolge ansagen wird. Sie können ein Bild hinzufügen url, Dadurch wird ein Bild in seinen ursprünglichen Abmessungen eingefügt, sodass Sie die Größe nicht ändern können. Sie können auch eine counter

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

::first-letter

Wir haben dieses Pseudoelement zu Beginn der Lektion erkannt. Nicht alle Preisvergleichsportal-Properties können beim Targeting verwendet werden. ::first-letter Folgende Eigenschaften 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 (z. B. text-decoration und word-spacing)

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

::first-line

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

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 ein Element 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 den ::backdrop-Pseudoelement:

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

::marker

Die ::marker Mit dem Pseudoelement können Sie das Aufzählungszeichen oder die Nummer eines Listenelements 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 wird nur eine kleine Teilmenge von CSS-Properties unterstützt:

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

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

::selection

Die ::selection Mithilfe eines Pseudoelements können Sie das Aussehen des ausgewählten Textes gestalten.

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

Mit diesem Pseudoelement kann wie in der obigen Demo der gesamte ausgewählte Text formatiert werden. Er kann auch in Kombination mit anderen Selektoren verwendet werden, um einen spezifischeren Auswahlstil zu erreichen.

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 einen Hilfshinweis hinzufügen, z. B. <input> mit einem placeholder-Attribut. Die ::placeholder können Sie diesen Text gestalten.

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

Die letzte in dieser Tour zu Pseudoelementen ist der ::cue-Pseudoelement. So können Sie die WebVTT-Cues gestalten, Dies sind die Untertitel eines <video>-Elements.

Sie können einen Selektor auch an einen ::cue übergeben, mit dem du bestimmte Elemente innerhalb einer Bildunterschrift gestalten kannst.

video::cue {
  color: yellow;
}

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

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

Wissen testen

Ihr Wissen über Pseudoelemente testen