Le meilleur didacticiel CSS pseudo-éléments en 2024, dans ce didacticiel, vous pouvez apprendre grammaire,: Première ligne pseudo-élément,Exemples,: Première lettre pseudo-élément,Exemples,Les pseudo-éléments et des classes CSS,Les pseudo-éléments multiples,Exemples,CSS -: avant pseudo-élément,Exemples,CSS -: après pseudo-élément,Exemples,Toutes les CSS pseudo-classes / éléments,
CSS pseudo-élément est utilisé pour ajouter des effets spéciaux sélecteurs.
Pseudo-élément de syntaxe:
classes CSS peuvent également utiliser les pseudo-éléments:
"Première ligne" pseudo-élément est utilisé pour mettre en place un style spécial à la première ligne de texte.
Dans l'exemple suivant, le navigateur sera basé sur "première ligne" pseudo-élément dans le style de la première ligne d'un format éléments p texte:
Note: "première ligne" pseudo-élément ne peut être utilisé pour des éléments de niveau bloc.
REMARQUE: Les propriétés suivantes peuvent être appliquées à la "première ligne" pseudo-élément:
"Première lettre" pseudo-élément est utilisé pour mettre en place un style spécial à la première lettre du texte:
Note: "first-letter" pseudo-élément ne peut être utilisé pour des éléments de niveau bloc.
REMARQUE: Les propriétés suivantes peuvent être appliquées à la "première lettre" pseudo-élément:
Les pseudo-éléments peuvent être combinés avec des classes CSS:
L'exemple ci-dessus fera toute la classe comme la première lettre de l'article de l'alinéa devient rouge.
Une pluralité de pseudo-éléments peuvent être combinés à utiliser.
Dans l'exemple suivant, le premier paragraphe de la lettre sera affichée en rouge, la taille de la police est xx-large. La première ligne du reste du texte sera bleu, et les petites lettres majuscules.
Les paragraphes de texte dans la taille de la police par défaut et la couleur à afficher:
"Avant" pseudo-élément peut insérer un nouveau contenu en face du contenu de l'élément.
L'exemple ci-dessous pour insérer une image en face de chaque <h1> élément:
": Après" pseudo-élément peut insérer un nouveau contenu après que le contenu de l'élément.
Les exemples suivants insérer une image après chaque <h1> élément:
sélecteur | exemple | L'exemple montre |
---|---|---|
: lien | a:link | Sélectionnez tous les liens non visités |
: visited | a:visited | Sélectionnez tous les liens visités |
: actif | a:active | Select est un lien actif |
: hover | a:hover | Placez la souris sur l'état de liaison |
: focus | input:focus | Après avoir sélectionné l'élément d'entrée a le focus |
: First-letter | p:first-letter | Sélectionnez la première lettre de chaque élément <p> |
: First-line | p:first-line | Sélectionnez la première ligne de chaque élément <p> |
: First-child | p:first-child | <] P> élément sélecteur correspond à tout élément appartenant au premier élément enfant |
: avant | p:before | Insérez le contenu avant de chaque élément <p> |
: après | p:after | Insérez le contenu après chaque élément <p> |
: Lang (langue) | p:lang(it) | sélection de l'attribut lang élément <p> à une valeur de départ |