En CSS3, le pseudo-élément est un mot-clé ajouté à la fin du sélecteur. Sa signification littérale est « faux élément » ou « élément de déguisement », qui est en fait un pseudo-élément principalement utilisé pour créer certains éléments ; qui ne sont pas dans les éléments DOM de l'arborescence et ajoutez-leur des styles.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
pseudo-éléments css3
Les pseudo-éléments sont littéralement compris comme des "faux éléments" ou des "éléments déguisés". En fait, cela peut être compris de cette façon. Les pseudo-éléments sont en fait des éléments virtuels qui n'existent pas (sous forme de code), et vous ne pouvez pas les trouver dans le document, donc les pseudo-éléments sont des éléments virtuels.
Le pseudo-élément est un mot-clé ajouté à la fin du sélecteur, principalement utilisé pour créer des éléments qui ne sont pas dans l'arborescence DOM et leur ajouter des styles.
Avec les pseudo-éléments, vous pouvez définir des styles pour des parties spécifiques de l'élément sélectionné sans recourir à l'ID ou aux attributs de classe de l'élément. Par exemple, grâce aux pseudo-éléments, vous pouvez définir le style de la première lettre d'un paragraphe, ou insérer du contenu avant ou après l'élément, etc.
En CSS1 et CSS2, l'utilisation des pseudo-éléments est la même que celle des pseudo-classes, et un deux-points : est connecté au sélecteur. Cependant, dans CSS3, l'utilisation du simple deux-points pour les pseudo-éléments a été remplacée par un double deux-points :: pour distinguer les pseudo-classes et les pseudo-éléments. Par conséquent, il est recommandé d’utiliser des doubles-points au lieu de simples deux-points lors de l’utilisation de pseudo-éléments. :与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。
selector::pseudo-element {
property: value;
}其中，selector 为选择器，pseudo-element 为伪元素的名称，property 为 CSS 中的属性，value 为属性对应的值。
注意：一个选择器中只能使用一个伪元素，而且伪元素必须紧跟在选择器之后。按照最新的 W3C 规范，在定义伪元素时您应该使用双冒号::而不是单个冒号:
<!DOCTYPE html>
<html>
<head>
<style>
p.one::after {
content:"";
display: inline-block;
width: 50px;
height: 10px;
background: blue;
}
p.two::after {
content:"要插入的内容";
color: red;
font-size: 6px;
}
p.three::after {
content: url('./smiley.gif');
position: relative;
top: 8px;
}
</style>
</head>
<body>
<p class="one">伪元素 ::after</p>
<p class="two">伪元素 ::after</p>
<p class="three">伪元素 ::after</p>
</body>
</html>:: au lieu de simples deux-points : lors de la définition de pseudo-éléments pour distinguer les pseudo-classes des pseudo-éléments. Cependant, comme l'ancienne version de la spécification du W3C ne faisait pas de distinction particulière, la plupart des navigateurs prennent actuellement en charge les méthodes à simple et double deux-points pour définir des pseudo-éléments. | Pseudo-élément | Exemple | |
|---|---|---|
| ::after | p::after | |
| ::before | p::before | |
| correspond à la première lettre du contenu de chaque élément | ::selection | p::selection |
| ::placeholder | input::placeholder | |
| de chaque zone de saisie du formulaire (par ex. |
