Pseudo-éléments CSS


Pseudo-élément CSS

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

Syntaxe

Syntaxe du pseudo-élément :

sélecteur : pseudo-élément {propriété : valeur;
Les classes CSS peuvent également utiliser des pseudo-éléments :

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

:pseudo de première ligne Élément

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

Dans l'exemple suivant, le navigateur formatera la première ligne de texte de l'élément p selon le style du pseudo-élément "first-line" :

Exemple

<!DOCTYPE html>
<html>
<head>
<style>
p:first-line 
{
color:#ff0000;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>可以使用:first-line伪元素为文本的第一行添加特殊效果。测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
</p>
</html>

Exécuter l'instance»Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Remarque : Le pseudo-élément "La première ligne" ne peut être utilisé que sur des éléments de niveau bloc.

Remarque : Les attributs suivants peuvent être appliqués au pseudo-élément "première ligne" :

  • attribut de police

  • attribut de couleur

  • attribut d'arrière-plan

  • attribut d'espacement des mots

  • attribut d'espacement des lettres

  • attribut de décoration de texte

  • attribut d'alignement vertical

  • texte -attribut de transformation

  • attribut de hauteur de ligne

  • attribut clair

 : premier -letter pseudo L'élément

pseudo-élément "first-letter" est utilisé pour définir un style spécial à la première lettre du texte :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter 
{
	color:#ff0000;
	font-size:xx-large;
}
</style>
</head>

<body>
<p>你可以使用 "first-letter" 伪元素向文本的首字母设置特殊样式！</p>
</body>
</html>

Exécuter l'exemple»Cliquez sur le bouton « Exécuter l'exemple » pour afficher l'exemple en ligne

Remarque : "premier- Le pseudo-élément letter" ne peut être utilisé que pour les éléments de niveau bloc.

Remarque : Les attributs suivants peuvent être appliqués au pseudo-élément "première lettre" :

  • attribut de police

  • attribut de couleur

  • attribut d'arrière-plan

  • attribut de marge

  • padding attribut

  • attribut de bordure

  • attribut de décoration de texte

  • attribut d'alignement vertical (uniquement si "float : aucun")

  • attribut de transformation de texte

  • attribut de hauteur de ligne

  • attribut float

  • attribut clear

Les pseudo-éléments et classes CSS

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

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

<p class="article">Paragraphe de l'article</p>

L'exemple ci-dessus rendra la première lettre de tous les paragraphes contenant l'article de classe 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.

Le texte restant du paragraphe sera affiché dans la taille et la couleur de police par défaut :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-letter
{
	color:#ff0000;
	font-size:xx-large;
}
p:first-line 
{
	color:#0000ff;
	font-variant:small-caps;
}
</style>
</head>

<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html>

Exécuter Exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne

CSS - :before pseudo-element

":before" pseudo -element peut être utilisé dans le contenu de l'élément Insérer un nouveau contenu à l'avance.

L'exemple suivant insère une image avant chaque élément <h1> :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Exécuter l'exemple»

Cliquez sur le bouton "Exécuter l'exemple" pour voir l'exemple en ligne

CSS - :after pseudo element

":after" pseudo element can be used dans l'élément Insérer un nouveau contenu après le contenu.

L'exemple suivant insère une image après chaque élément <h1> :

Exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :after pseudo-element inserts content after an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Tous les pseudo-classes/éléments CSS

选择器示例示例说明
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:activea:active选择正在活动链接
:hovera:hover把鼠标放在链接上的状态
:focusinput:focus选择元素输入后具有焦点
:first-letterp:first-letter选择每个<p> 元素的第一个字母
:first-linep:first-line选择每个<p> 元素的第一行
:first-childp:first-child选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:beforep:before在每个<p>元素之前插入内容
:afterp:after在每个<p>元素之后插入内容
:lang(language)p:lang(it)为<p>元素的lang属性选择一个开始值
←
→