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中文網(wǎng)</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>今天來學(xué)習(xí)知識(shí)</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>
