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
undfont-weight
)- Texteigenschaften (z. B.
text-decoration
undword-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ünftefont
Unterkünftetext
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ünfteanimation
- undtransition
-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 nichtbackground-image
text
Unterkünfte
::placeholder
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-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ünftefont
Unterkünftetext
Unterkünfte
::cue
Unterstützte Browser
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
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
Welche der folgenden Elemente sind keine Pseudoelemente?
:active
::before
::pencil
::first-paragraph
::marker
::after
Pseudoelemente befinden sich in einer HTML-Datei.