HTML5 Pseudo-Elements sind spezielle CSS-Selektoren, die es ermöglichen, bestimmte Teile eines HTML-Elements gezielt zu gestalten, ohne zusätzliche HTML-Tags hinzufügen zu müssen.
<html>
<head>
<title>HTML5 Pseudo elements</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
position: relative;
}
/* Diese Pseudo-Elements fügen Inhalte vor oder nach dem ausgewählten Element (box) ein. */
.box::before {
content: "Vor dem Inhalt";
font-weight: bold;
}
.box::after {
content: " Nach dem Inhalt";
font-style: italic;
}
/* Dieses Pseudo-Element ermöglicht die Gestaltung der ersten Zeile eines Textblocks. */
.highlight::first-line {
color: red;
font-size: 18px;
text-transform: uppercase;
}
/* Dieses Pseudo-Element ermöglicht die Gestaltung des markierten Texts auf der Webseite. */
::selection {
background-color: yellow;
color: black;
}
/* Sie können ::before und ::after Pseudo-Elements verwenden, um Bilder vor oder nach einem Element einzufügen. */
.avatar {
width: 100px;
height: 100px;
background-color: lightgray;
border-radius: 50%;
position: relative;
}
.avatar::before {
content: "";
background-image: url('https://html-online.com/img/html-editor.png');
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
/* Das ::nth-child Pseudo-Element ermöglicht es Ihnen, bestimmte Instanzen eines Elements in einer Liste zu gestalten. */
li:nth-child(2) {
color: blue;
font-weight: bold;
}
/* Mit dem ::placeholder Pseudo-Element können Sie den Platzhaltertext in Eingabefeldern gestalten. */
.custom-input::placeholder {
color: green;
font-style: italic;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">Inhalt</div>
<p class="highlight">Diese Zeile wird hervorgehoben.<br>Diese aber nicht!</p>
<p>Markieren Sie diesen Text, um die Gestaltung zu sehen.</p>
<div class="avatar"></div>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li>Dritter Punkt</li>
</ul>
<input type="text" class="custom-input" placeholder="Geben Sie Ihren Text ein">
</body>
</html>