Beispiel:CSS-Pseudo-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" >
<title>::first-line</title>
<style>
p::first-letter {
font-size: 2.5em;
font-weight: bold;
color: white;
background: rebeccapurple;
float: left;
margin-right: 0.1em;
line-height: 1;
padding: 0.2em;
}
p::first-line {
font-weight: bold;
color: magenta;
}
.note {
background: #f0f0f0;
padding: 1em;
border-left: 5px solid rebeccapurple;
}
p {
max-width: 25em;
}
body {
font-family: sans-serif;
line-height: 1.6;
color: #333;
margin: 2em auto;
padding: 0 1em;
}
</style>
</head>
<body>
<h1><code>::first-line</code> sorgt für Aufmerksamkeit!</h1>
<p>Dies ist ein Absatz, der zeigt, wie <code>::first-letter</code> und <code>::first-line</code> zusammen verwendet werden können. Der erste Buchstabe wird vergrößert und farbig dargestellt, während die erste Zeile fett gedruckt und in einer anderen Farbe hervorgehoben wird.</p>
<p class="note">Beachte, wie die Gestaltung der ersten Zeile die Aufmerksamkeit auf sich zieht, ohne den Rest des Absatzes zu verändern. Diese Technik wird häufig in Artikeln, Newslettern oder Blogs verwendet, um Einleitungen hervorzuheben.</p>
</body>
</html>
