The CSS Podcast – 014: Pseudo-Elemente
Wenn Sie einen Artikel haben und der erste Buchstabe viel größer sein soll, wie erreichen Sie das?
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
undfont-weight
)- Texteigenschaften wie
text-decoration
undword-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ünftefont
Unterkünftetext
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ünfteanimation
- undtransition
-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 nichtbackground-image
text
Unterkünfte
::placeholder
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ünftefont
Unterkünftetext
Unterkünfte
::cue
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?
::before
:active
::after
::pencil
::first-paragraph
::marker
Pseudoelemente finden Sie in einer HTML-Datei.