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
undfont-weight
)- Texteigenschaften (z. B.
text-decoration
undword-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ünftefont
Unterkünftetext
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ünfteanimation
- undtransition
-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 nichtbackground-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ünftefont
Unterkünftetext
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
Welche der folgenden Elemente sind keine Pseudoelemente?
::before
content: '';
hinzuzufügen.::first-paragraph
::after
content: '';
hinzuzufügen.::marker
::pencil
:active
Pseudoelemente können in einer HTML-Datei gefunden werden.