Beispiel:CSS-Pseudo-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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:SELFHTML-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>

::first-line sorgt für Aufmerksamkeit!

Dies ist ein Absatz, der zeigt, wie ::first-letter und ::first-line 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.

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.

</body> </html>

Abgerufen am 29.08.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-Pseudo-2.html"