Fast unbekannte HTML Pseudo Elemente mit denen ihr ein Text designen könnt

von | Okt 31, 2024 | Allgemein | 0 Kommentare

Schlagwörter: CSS3 - d4db00 - HTML - Webdesign

Es gibt nichts langweiligeres als wenn ein Text von links bis rechts durchgehend ist, ohne Umbruch, ohne Bild… einfach nur langer Text. Aus diesem Grund möchte ich euch heute ein paar fast vergessene Psoido HTML / CSS Elemente zeigen, mit denen ihr eure Texte ein wenig auffrischen könnt.

Video

Icons vor und nach einem Text

Mit before (vor dem Text) oder after (nach dem Text) wird die Position des Icon definiert.

1
2
3
::after {
            content: "🖖";
        }

1. Buchstabe eines Abschnitt designen

Hier könnt ihr den 1. Buchstaben designen – das kann dann so aussehen wie in den Büchern aus dem Mittelalter wo die Mönche die 1. Buchstaben immer verziehrt haben.

1
2
3
4
5
::first-letter {
            font-size: 50px;
            color: rgb(0, 79, 94);
            text-transform: uppercase;
        }

1. Zeile eines Abschnitts designen

Natürlich könnt ihr auch gleich die erste ganze Zeile designen und zwar mit diesem Code.

1
2
3
4
::first-line {
            color: brown;
            font-size: 20px;
        }

Text Markierung einfärben

Wenn ihr einen Text markiert, dann wird er meistens schwarz – aber auch das könnt ihr ein wenig designen

1
2
3
::selection{
color: #d4db00;
}

Listen Punkte mit Icon ersetzen

Und hier könnt ihr die normalen Punkte in einer Liste mit einem Icon ersetzen.

1
2
3
4
::marker {
            color: rgb(249, 5, 229);
            content: '🧺 ';
        }

0 Kommentare

Einen Kommentar abschicken

Du kannst auf Fediverse-Profile verlinken, indem du fl:@benutzername in deinem Kommentar eingibst.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert