36 lines
1018 B
HTML
36 lines
1018 B
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Pseudo-Elemente</title>
|
||
<style>
|
||
body { padding: 1.2rem; font-family: system-ui, sans-serif; font-size: 14px; }
|
||
.required::before {
|
||
content: "* ";
|
||
color: red;
|
||
}
|
||
p.drop { line-height: 1.5; }
|
||
p.drop::first-letter {
|
||
font-size: 3em;
|
||
font-weight: bold;
|
||
color: #d63384;
|
||
float: left;
|
||
line-height: 0.9;
|
||
padding-right: 6px;
|
||
padding-top: 2px;
|
||
}
|
||
label { display: block; margin-top: 10px; }
|
||
input { padding: 4px 8px; border: 1px solid #9ca3af; border-radius: 3px; margin-top: 3px; }
|
||
h3 { margin: 0.6rem 0 0.3rem; font-size: 0.95rem; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<h3>::before (Pflichtfeld-Sternchen)</h3>
|
||
<label class="required">E-Mail-Adresse</label>
|
||
<input type="email">
|
||
|
||
<h3>::first-letter (Initial-Buchstabe)</h3>
|
||
<p class="drop">Lorem ipsum dolor sit amet. Der erste Buchstabe wird per CSS hervorgehoben – kein extra HTML nötig.</p>
|
||
</body>
|
||
</html>
|