ATOZ CSS Screencast: CSS Pseudo Elements

Points de base

Les pseudo-éléments
• CSS sont des éléments sur la page qui ne sont pas présents dans le code HTML, et ils peuvent être utilisés en utilisant n'importe quel style CSS appliqué à d'autres éléments.
Les pseudo-éléments
• et :before dans :after CSS peuvent être utilisés pour générer du contenu de la page, y compris le texte, les images, les valeurs d'attribut et les compteurs. Ils peuvent également être utilisés pour créer des formes complexes avec un marquage minimal.
• Les différents pseudo-éléments dans CSS incluent :first-line, :first-letter, :selection, :before, :after et
. Ceux-ci peuvent être utilisés pour styliser des parties spécifiques d'un élément, insérer du contenu avant et après le contenu d'un élément, et styliser la première lettre ou la première ligne d'un élément de niveau bloc, etc.

Explication vidéo

(Chargement dans le lecteur ...) Cette vidéo fait partie de la série ATOZ CSS. Vous pouvez trouver d'autres contenus dans la série ici.

Enregistrement texte

Le pseudo-élément CSS est un élément sur la page qui n'apparaît pas dans le code HTML.

Ils peuvent être utilisés avec n'importe quel style CSS appliqué à tout autre élément.

:before Deux pseudo-éléments spéciaux— :after et

- peuvent être utilisés pour générer du contenu de la page à partir de CSS et avoir de nombreux cas d'utilisation potentiels.

Dans cette section, nous apprendrons:

cinq pseudo-éléments différents
générer du texte, des valeurs d'attribut d'image et des compteurs de CSS
Comment créer des formes complexes avec un balisage minimal

pseudo-élément

Il y a cinq pseudo-éléments dans CSS:

• :first-line
• :first-letter
• :selection
• :before
• :after

Ceux-ci se distinguent des pseudo-classes par des doubles colons, mais pour la simplicité, ils sont généralement écrits à l'aide de colons simples dans CSS.

:first-line Voici une longue référence au bloc de texte de l'espace réservé. Je peux modifier la couleur de la première ligne du texte en utilisant :first-letter, qui s'applique même après la réforme du texte. Je peux créer un effet CAPS initial en définissant le style de :selection avec des tailles de police flottantes et plus grandes. Je peux également modifier la couleur du texte sélectionné en utilisant

.

:before Je peux utiliser les pseudo-éléments :after et content pour ajouter de grandes citations avant et après la référence du bloc. Le texte est généré à partir de l'attribut

, puis vous pouvez utiliser les styles CSS pour obtenir l'effet souhaité.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Créer du contenu

:before Utilisation :after et

Les pseudo-éléments nous permettent d'ajouter divers contenu à la page.

Nous avons vu comment ajouter du contenu texte à la page, mais nous pouvons également ajouter des images, des valeurs d'attribut, des compteurs ou des chaînes vides, il suffit d'accéder à ces deux éléments supplémentaires.

L'ajout d'une image est similaire à l'ajout d'une image d'arrière-plan en utilisant url(). Ici, utilisez url() comme valeur de l'attribut content. Je préfère en fait utiliser des images d'arrière-plan et accéder au pseudo-élément en créant une chaîne vide pour content. Cela fournit plus de contrôle sur l'image, car toutes les propriétés couramment utilisées telles que background-position, background-repeat et background-size sont disponibles.

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Vous pouvez également utiliser l'attribut content pour injecter la valeur de l'attribut HTML dans la page. Lors de la création d'une feuille de style d'impression, j'aime ajouter l'extrait de code suivant pour sortir l'URL du lien afin qu'ils puissent être lus à partir de la page:

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

Cela ajoutera des liens après le texte du lien pour tout lien qui n'est pas un lien interne ou un lien de hachage.

Le dernier cas particulier de la génération de contenu est la valeur de la variable de compteur d'insertion. J'ai trouvé que cela était très utile dans la numérotation des listes complexes de termes et conditions juridiques.

Voici une série de titres, et ci-dessous est une série de listes imbriquées. Je veux que chaque titre de chapitre ait un numéro et chaque élément de liste est un numéro d'enfant pour chaque chapitre.

Pour chaque h2, je vais incrémenter un compteur "section"; Avant chaque titre de chapitre, je publierai la valeur du compteur du chapitre; Des chaînes supplémentaires peuvent être ajoutées entre les compteurs pour créer des systèmes de numérotation complexes. La forme simplifiée de cette méthode peut être utilisée pour contrôler le style des nombres ou des balles dans une liste.

a[href]:not([href*="#"]):after {
  content: attr(href);
}

forme

Comme chaque élément de la page peut avoir deux éléments "supplémentaires" et peut être stylisé en fonction de nos préférences, diverses formes complexes peuvent être créées.

En pensant à l'exemple de démo, j'ai vu une référence à la forme sur CSS-Tricks; Faisons des symboles yin et yang avec un seul élément.

h2 {counter-increment: section;}
ul {counter-reset: item;}
li {counter-increment: item;}

h2:before {
  content: counter(section) " - ";
}
li:before {
  content: counter(section) "." counter(item);
}

En commençant par la boîte, vous pouvez utiliser border-radius pour le convertir en cercle. Deux demi-cercles colorés peuvent être créés en utilisant border-bottom qui est égal à la hauteur du cercle. Deux points sont créés en créant deux cercles avec des pseudo-éléments et en les plaçant avec position:absolute. En utilisant des bordures qui correspondent à la couleur de demi-cercle, vous pouvez créer deux points de terminaison circulaires du symbole. Si vous me demandez, c'est cool.

J'aime utiliser des pseudo-éléments; vous pouvez faire beaucoup avec eux et ajouter divers visuels à la page sans gâcher le balisage.

Des questions fréquemment posées sur les pseudo-éléments CSS

Quels sont les différents types de pseudo-éléments CSS?

Le pseudo-élément CSS est utilisé pour styliser des parties spécifiques d'un élément. Il existe plusieurs types de pseudo-éléments, y compris ::before, ::after, ::first-letter, ::first-line, ::selection, ::backdrop, ::placeholder, ::before et ::after. Chaque pseudo-élément est ciblé dans une autre partie de l'élément. Par exemple, ::first-letter et ::first-line sont utilisés pour insérer le contenu avant et après le contenu de l'élément, tandis que

et

sont utilisés pour styliser la première lettre ou la première ligne d'un élément de niveau bloc. ::before ::after comment utiliser

et

pseudo-éléments? ::before Les pseudo-éléments ::after content et

sont utilisés pour insérer le contenu avant et après le contenu de l'élément. Ils sont souvent utilisés à des fins décoratives, comme l'ajout d'icônes ou de citations. Pour utiliser ces pseudo-éléments, vous devez spécifier l'attribut

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

. Par exemple, pour ajouter une icône cardiaque avant un paragraphe, vous pouvez utiliser le code suivant:

Puis-je utiliser des pseudo-éléments pour styliser l'entrée de formulaire? ::placeholder

Oui, vous pouvez styliser l'entrée de formulaire à l'aide de pseudo-éléments. Cependant, toutes les entrées de formulaire ne peuvent pas être stylisées à l'aide de pseudo-éléments. Par exemple, le pseudo-élément

li:before {
  content: url(star.png);
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
}

peut être utilisé pour styliser le texte de l'espace pour le champ de saisie. Voici un exemple:

Comment coiffer la première lettre d'un paragraphe en utilisant un pseudo-élément? ::first-letter

Vous pouvez utiliser le pseudo-élément

a[href]:not([href*="#"]):after {
  content: attr(href);
}

pour styliser la première lettre de l'élément au niveau du bloc. Ceci est généralement utilisé pour créer des initiales. Voici un exemple:

Puis-je utiliser plusieurs pseudo-éléments sur le même élément? ::before ::after Oui, vous pouvez utiliser plusieurs pseudo-éléments sur le même élément. Par exemple, vous pouvez utiliser ::before et ::after sur le même élément pour insérer du contenu avant et après son contenu. Cependant, il est important de se rappeler que l'ordre des pseudo-éléments l'est.

Le pseudo-élément sera toujours inséré avant

pseudo-élément.

Tous les navigateurs prennent-ils en charge les pseudo-éléments?

La plupart des navigateurs modernes prennent en charge les pseudo-éléments. Cependant, les versions plus anciennes de certains navigateurs peuvent ne pas prendre en charge toutes les pseudo-éléments. Avant d'utiliser des pseudo-éléments, il est préférable de vérifier la compatibilité du navigateur.

Quelle est la différence entre les pseudo-éléments et les pseudo-classes?

Les pseudo-éléments et les pseudo-classes sont utilisés pour appliquer des styles aux éléments en fonction de certaines conditions. Cependant, ils sont utilisés à différentes fins. Une pseudo-classe est utilisée pour définir son style lorsqu'un élément est dans un état spécifique, par exemple lorsque la souris plane dessus ou s'accélère. D'un autre côté, les pseudo-éléments sont utilisés pour styliser des parties spécifiques d'un élément.

Puis-je utiliser des pseudo-éléments avec JavaScript?

Les pseudo-éléments ne font pas partie du DOM, ils ne peuvent donc pas être accessibles ou manipulés directement à l'aide de JavaScript. Cependant, vous pouvez modifier le style appliqué à un pseudo-élément en modifiant le style de l'élément parent à l'aide de JavaScript.

Comment utiliser ::selection pseudo-élément?

::selection Le pseudo-élément est utilisé pour modifier l'apparence du texte sélectionné par l'utilisateur. Par exemple, vous pouvez modifier la couleur d'arrière-plan et la couleur du texte du texte sélectionné. Voici un exemple:

blockquote {
  position: relative;
  border-left: 5px solid #66d9ef;   
  padding: 1em 1em 1em 2em;
}
blockquote p:first-line {
  color: #cc3f85;
}
blockquote p:first-letter {
  float: left;
  font-size: 4em;
  margin-right: 0.5em;
}
::selection {
  background: #cc3f85;
  color: #fff;
}
blockquote:before {
  content: "“";
  position: absolute;
  top: 0;
  left: -0.6em;
  font-size: 8em;
  font-family: Georgia;
}
blockquote:after {
  content: "”";
  bottom: -0.25em;
  right: -0.5em;
  line-height: 1rem;    
}
blockquote:before,
blockquote:after {
  position: absolute;
  color: #66d9ef;
  font-size: 8em;
  font-family: Georgia;
}

Puis-je animer des pseudo-éléments?

Oui, vous pouvez animer des pseudo-éléments à l'aide d'animations ou de transitions CSS. Cependant, n'oubliez pas que toutes les propriétés ne peuvent pas être animées. Par exemple, vous pouvez animer l'opacité ou la transformation d'un pseudo-élément, mais vous ne pouvez pas animer l'attribut content.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!