communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Pseudo-éléments CSS

Pseudo-élément CSS

Le pseudo-élément CSS est utilisé pour ajouter des effets spéciaux au sélecteur.

Syntaxe

Syntaxe des pseudo-éléments :

selector:pseudo-element {property:value;}

Les classes CSS peuvent également utiliser des pseudo-éléments :

selector.class:pseudo-element {property:value;}

:pseudo-élément de première ligne

Le pseudo-élément "première ligne" est utilisé pour ajouter à la première ligne de texte Définir des styles spéciaux.

Remarque : le pseudo-élément "première ligne" ne peut être utilisé que pour les éléments de niveau bloc.

Remarque : Les propriétés suivantes peuvent être appliquées au pseudo-élément "première ligne" :

propriétés de police

propriétés de couleur

propriétés d'arrière-plan

espacement des mots

espacement des lettres

décoration du texte

alignement vertical

transformation du texte

line-height

clear

:pseudo-élément de première lettre

Le pseudo-élément "première lettre" est utilisé pour définir des styles spéciaux à la première lettre du texte

Remarque : le pseudo-élément "première lettre" ne peut être utilisé que pour les éléments de niveau bloc.

Remarque : Les propriétés suivantes peuvent être appliquées au pseudo-élément "première lettre" :

propriétés de la police

propriétés de la couleur

propriétés de l'arrière-plan

propriétés de marge

propriétés de remplissage

propriétés de bordure

text-decoration

alignement vertical (uniquement si "float" est "aucun" ")

text-transform

line-height

float

clear

pseudo-éléments et Classes CSS

Les pseudo-éléments peuvent être combinés avec des classes CSS :

p.article:first-letter {color:#ff0000;}

< ;p class="article ">Un paragraphe dans un article</p>

Dans l'exemple ci-dessus, la première lettre de tous les paragraphes contenant un article de classe deviendra rouge.

Plusieurs pseudo-éléments

peuvent être utilisés en combinaison avec plusieurs pseudo-éléments.

Dans l'exemple ci-dessous, la première lettre du paragraphe apparaîtra en rouge et sa taille de police sera xx-large. Le reste du texte de la première ligne sera bleu et apparaîtra en petites majuscules. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line 
{
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>You can combine the :first-letter and :first-line pseudo-elements to add a special effect to the first letter and the first line of a text!</p>
</body>
</html>

CSS - :before pseudo-element

":before" pseudo-élément peut insérer un nouveau contenu avant le contenu de l'élément. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::before 伪元素示例</title>
<style type="text/css" media="all">
div::before
{
background: lightgreen;
content: "张三";
}
</style>
</head>
<body>
<div>今天来学习知识</div>
</body>
</html>

CSS - :after pseudo-element

":after" le pseudo-élément peut insérer un nouveau contenu après le contenu de l'élément. 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS ::after 伪元素示例</title>
<style type="text/css" media="all">
div::after
{
background: lightgreen;
content: "周末";
}
</style>
</head>
<body>
<div>今天是</div>
</body>
</html>


Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS ::before 伪元素示例</title> <style type="text/css" media="all"> div::before { background: lightgreen; content: "张三"; } </style> </head> <body> <div>今天来学习知识</div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492446 joue