Before und After Pseudo Elemente | CSS Tutorial Deutsch

Mit dem Coupon-Code: KURZUNDKNAPP
sparst du 10% Rabatt auf alle Webhosting-Pakete mit einer Laufzeit von 12 Monaten und mehr.

::before und ::after sind Pseudo-Elemente, die wir in CSS stylen können. Pseudo-Elemente erscheinen vor und nach dem Inhalt eines HTML-Elements. Das bedeutet, wenn du für eine h1::before festlegst, dann wird das Before-Element innerhalb der Überschrift vor ihrem Inhalt erscheinen. Mit ::after erscheint das Pseudo-Element nach dem Inhalt der Überschrift. Ein Pseudo-Element kannst du einem Element per CSS geben. Dafür benötigst du den ::before oder den ::after Selektor. Das würde in der Umsetzung so aussehen:
h1::before{

}
Hier gebe ich der Überschrift ein Before-Element. Das kann ich nun in den geschweiften Klammern stylen.
In diesem Video erkläre ich dir, was Pseudo-Elemente sind und wie sie funktionieren. Außerdem zeige ich dir drei Beispiele, in denen sie ganz nützlich sind.

Timestamps:
00:00 Einführung
00:15 Was sind Pseudo-Elemente?
00:29 Wie funktionieren sie?
01:40 Positioning
02:04 Hover & Transition
02:33 Tooltip
03:28 data-attribut
03:51 Wichtiger Hinweis

In diesem Video zeige ich dir drei Dinge, die du mit den Pseudo-Elementen Before und After anstellen kannst:

1. Überschrift mit einem Gradient unterstreichen
2. Balken beim Hovern über ein Div erscheinen lassen
3. Tooltip bzw. Kurzhinweis als Infotext über ein Element erscheinen lassen

Musik im Hintergrund: Homebound von Anno Domini Beats

CODE FÜR DAS ERSTE BEISPIEL (Überschrift mit einem Gradient unterstreichen):

body{
background: rgb(23, 30, 46);
}
h1{
margin: 100px;
font-size: 78px;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: inline-block;
position: relative;
}

h1::after{
content: '';
height: 5px;
width: 100%;
background: linear-gradient(to right, #F4E, #F40);
position: absolute;

left: 0;
bottom: 0;
}

CODE FÜR DAS ZWEITE BEISPIEL (Balken beim Hovern über ein Div erscheinen lassen):
body{
height: 100vh;
background-color: #151525;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 15px;
}
.item{
background: linear-gradient(to right, #00ccff, #8400ff);;
height: 90px;
width: 450px;
border-radius: 4px;
display: flex;
align-items: center;
padding: 0 25px;
font-size: 22px;
font-family: Poppins, sans-serif;
color: rgb(188, 255, 252);

position: relative;
}
.item::after{
content: '';
height: 12px;
width: 0;
background-color: rgb(0, 255, 157);
position: absolute;
bottom: 0;
left: 0;
transition: .2s ease-in-out;
}
.item:hover::after{
width: 100%;
}

CODE FÜR DAS DRITTE BEISPIEL (Tooltip bzw. Kurzhinweis als Infotext über ein Element erscheinen lassen):

*{
padding: 0;
margin: 0;
}
body{
height: 100vh;
background: radial-gradient(rgb(39, 53, 92), #17133a);
display: flex;
justify-content: center;
align-items: center;
}
.image{
height: 300px;
width: 400px;
background-position: center;
background-size: cover;

border-radius: 20px;
border: 10px solid white;
position: relative;
}
.image:hover::before{
content: attr(data-tooltip);

position: absolute;
top: -110px;
left: 50%;
transform: translate(-50%);

background-color: rgb(137, 212, 255);
padding: 20px;
border-radius: 4px;
text-align: center;
font-family: Poppins, sans-serif;
}

[chiroaksun]

Kurz und knapp aber sehr gut erklärt!! NATÜRLICH DAUMEN HOCH UND ABO!!!

[alexejwilhelm]

Like hast und Abonniert hab ich dich schon vor ca. einem Jahr

[leleexl]

Ich verstehe absolut nicht, wieso (bezogen auf das, was unter .image{ usw... bei 2:49 im Code zu sehen ist) nur fixe Einheiten für das Bild funktionieren, also wie im Video "px", aber wenn ich versuche mit % oder vw zu arbeiten, das Bild gar nicht erscheint, also gar nicht angezeigt wird. Kann mir das jemand erklären? ChatGPT konnte es leider nicht...

[martapfahl]

Hey, ich habe eine Chart Bar mit einem Label darunter. Das Label ist mein ::after Element, wenn ich über das Hauptelement hover soll die Opacity der Chart Bar auf 0.7 gehen, jedoch NICHT die Opacity des Labels, also des ::after Elements, weißt du wie ich das coden kann?

[ritatidevelopment]

Hi, wie immer super Video kannst du vielleicht den Code für die Liste reinstellen, wäre super.