CSS Pseudo-élément

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

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" :

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

<body>
<p>您可以使用:线伪元素添加特殊效果给第一行文本。</p>
</body>
</html>

Exécuter le programme Essayez

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

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

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

"premier- letter" pseudo-élément 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>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p>
</body>
</html>

Exécutez le programme pour l'essayer out

Remarque : Le pseudo-élément "première lettre" ne peut être utilisé qu'avec des éléments de niveau bloc.

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

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>

L'exemple ci-dessus fera tourner les premières lettres de tous les paragraphes avec 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 reste du texte 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>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>

Exécutez le programme pour l'essayer

CSS - :before pseudo-element

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

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:before {content:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </style>
</head>

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

Exécuter Essayez le programme

CSS - :after pseudo-element

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

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(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg);}
    </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écutez le programme pour l'essayer

Tous les pseudo-classes/éléments CSS

< tbody>< th width="63%" align="left">Exemple de description < td>Sélectionner tous les liens non visités< tr>< td>:focus< de chaque

élément tr>< td>:first-line

élément >< td class="notranslate">p:lang(it )

Sélecteur

Exemple

:link

a:link

:visité

a:visité

Sélectionner tous les liens visités Lien< /td>

:active

a:active

Sélectionnez un lien actif

:hover

a:hover

L'état de placement de la souris sur le lien

input:focus

L'élément sélectionné a le focus après la saisie

:first - letter

p:first-letter

Sélectionnez la première lettre

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

p:first-line

Sélectionnez la première ligne

:first-child

p:first-child

Le sélecteur correspond au premier enfant de n'importe quel élément Élément<]p>

:avant

p:avant

Insérer du contenu avant chaque

élément

:after

p:after< /td>

Insérer du contenu après chaque

élément

:lang(langue)

Choisissez une valeur de départ pour l'attribut lang de l'élément <🎜>

<🎜><🎜><🎜> <🎜><🎜><🎜><🎜>

Pseudo-éléments CSS

CSS Pseudo-élément

Syntaxe

<!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>You can use the :first-letter pseudo-element to add a special effect to the first character of a text!</p> </body> </html>

CSS - :before pseudo-element

Exemple

Exécuter Essayez le programme

CSS - :after pseudo-element

Exemple

Tous les pseudo-classes/éléments CSS

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]