Comprendre le pseudo-élément avant et après
La feuille de style en cascade (CSS) est principalement conçue pour appliquer des styles au balisage HTML. Toutefois, dans certains cas, lorsque l'ajout de balisage supplémentaire au document est redondant ou impossible, il existe en fait une fonctionnalité dans CSS qui permet d'ajouter du balisage sans perturber le document proprement dit, à savoir le pseudo-éléments.
Vous avez entendu parler de ce terme, en particulier lorsque vous avez suivi certains de nos tutoriels.
Il y a en fait quelques membres de la famille CSS qui sont classés comme pseudo-éléments comme le :Première ligne, :première lettre, ::sélection, :avant et :après. Mais, pour cet article, nous limiterons notre couverture aux seuls :avant et :après, “pseudo-éléments” ici, nous nous référerons spécifiquement aux deux. Nous allons examiner ce sujet particulier de base.
Prise en charge de la syntaxe et du navigateur
le pseudo-éléments ont effectivement été autour depuis CSS1, mais le :avant et :après que nous discutons ici ont été libérés dans CSS2.1. Au début, le pseudo-éléments utiliser la syntaxe en un seul point, puis à mesure que le Web évoluait, en CSS3, pseudo-éléments ont été révisés pour utiliser le double-colon - devenant ::avant Et ::après - pour le distinguer avec pseudo-classes (c'est à dire. :flotter, :actif, etc).
Toutefois, que vous utilisiez le format simple-colon ou double-colon, les navigateurs le reconnaîtront toujours. Et comme Internet Explorer 8 ne prend en charge que le format à un seul colon, il est préférable d’utiliser ce dernier si vous souhaitez une compatibilité de navigateur plus étendue..
Qu'est ce que ça fait?
En bref, le pseudo-éléments va insérer un élément supplémentaire avant ou après l'élément du contenu, donc lorsque nous ajoutons les deux, ils sont techniquement égaux, avec le balisage suivant.
:avant C'est le contenu principal. :après
Mais ces éléments ne sont pas réellement générés sur le document. Ils sont toujours visibles à la surface, mais vous ne les trouverez pas sur la source du document, ils sont donc pratiquement faux éléments.
Utiliser des pseudo-éléments
En utilisant pseudo-éléments est relativement facile; la syntaxe suivante sélecteur: avant ajoutera un élément avant le sélecteur de contenu tandis que cette syntaxe sélecteur: après ajoutera après, et pour ajouter un contenu à l'intérieur, nous pouvons utiliser le contenu propriété.
Par exemple, l’extrait ci-dessous ajoute un guillemet avant et après la fin du blockquote.
blockquote: before contenu: open-quote; blockquote: after content: close-quote;
Pseudo-éléments de style
En dépit d’être un faux élément, le pseudo-éléments en fait agir comme un “réal” élément; nous sommes en mesure d'ajouter n'importe quelle déclaration de style dessus, telle que changer la couleur, ajouter un arrière-plan, ajuster la taille de la police, aligner le texte à l'intérieur, etc..
blockquote: before contenu: open-quote; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; arrière-plan: #ddd; float: gauche; position: relative; en haut: 30px; blockquote: after content: close-quote; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; arrière-plan: #ddd; Flotter à droite; position: relative; en bas: 40 px;
Spécifier la dimension
Les éléments générés sont par défaut des éléments de niveau en ligne. Ainsi, lorsque nous sommes sur le point de spécifier la hauteur et la largeur, nous devons d’abord le définir en tant qu’élément de bloc à l’aide de la commande bloc de visualisation déclaration.
blockquote: before contenu: open-quote; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; arrière-plan: #ddd; float: gauche; position: relative; en haut: 30px; border-radius: 25px; / ** le définit comme un élément de bloc ** / display: block; hauteur: 25px; largeur: 25px; blockquote: after content: close-quote; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; arrière-plan: #ddd; Flotter à droite; position: relative; en bas: 40 px; border-radius: 25px; / ** le définit comme un élément de bloc ** / display: block; hauteur: 25px; largeur: 25px;
Joindre une image de fond
Nous pouvons également remplacer le contenu par une image plutôt que par du texte brut. Bien que le contenu la propriété fournit un url () chaîne pour insérer une image, mais dans la plupart des cas, je préfère de loin utiliser le Contexte propriété pour plus de contrôle sur l'image attachée.
blockquote: before content: ""; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; float: gauche; position: relative; en haut: 30px; border-radius: 25px; fond: url (images / quotationmark.png) -3px -3px #ddd; bloc de visualisation; hauteur: 25px; largeur: 25px; blockquote: after content: ""; taille de la police: 24 pt; text-align: center; hauteur de ligne: 42px; couleur: #fff; Flotter à droite; position: relative; en bas: 40 px; border-radius: 25px; fond: url (images / quotationmark.png) -1px -32px #ddd; bloc de visualisation; hauteur: 25px; largeur: 25px;
Cependant, comme vous pouvez le voir dans l'extrait ci-dessus, nous déclarons toujours le contenu propriété et cette fois avec une chaîne vide. le contenu la propriété est un prérequis et devrait toujours être appliqué; sinon le pseudo-élément ne fonctionnera pas quoi que ce soit.
Combinaison avec des pseudo-classes
Bien qu'ils soient un genre différent de pseudo, nous pouvons utiliser le pseudo-classes de même que pseudo-éléments ensemble dans une règle CSS, par exemple, si nous voulons tourner la fond de guillemet un peu plus sombre lorsque nous survolons la blockquote.
blockquote: survol: après, blockquote: survol: avant background-color: # 555;
Ajout d'un effet de transition
Et nous pouvons même appliquer le transition propriété sur eux pour créer un effet de transition de couleur gracieuse.
transition: tous les 350ms; -o-transition: tous les 350ms; -moz-transition: tous les 350ms; -webkit-transition: tous les 350ms;
Malheureusement, l'effet de transition ne semble fonctionner que dans la dernière version de Firefox. Espérons que davantage de navigateurs rattraperont leur retard pour permettre l’application de la propriété de transition dans pseudo-éléments A l'avenir.
- Démo
- Source de téléchargement
Plus d'inspiration
Pour vous inspirer, nous avons sélectionné trois exemples intéressants qui peuvent vous donner des idées pour votre conception de sites Web..
Ombres fascinantes
Dans ce tutoriel, Paul Underwood a expliqué comment créer un effet d’ombre plus réaliste et plus fascinant à l’aide de :avant et :après pseudo-éléments. Les deux d'entre eux sont positionnés absolument et placés à l'extrême arrière avec négatif z-index valeur.
Effet d'image empilé
En utilisant le pseudo-éléments Il est également possible de créer un effet d’image empilée désordonné, mais avec une seule image sur le balisage. le pseudo-éléments est utilisé pour créer une illusion des images empilées à l'arrière de l'image réelle en utilisant négatif z-index.
Conclusion
Pseudo-éléments est simplement “cool” et finalement utilisable, fondamentalement, nous avons deux éléments bonus pour chaque élément, nous ajoutons sans interférer avec la structure HTML réelle, puis en les transformant en presque tout ce que nous pouvons imaginer.
Il y a en fait une amélioration pour pseudo-éléments sur lequel on travaille actuellement, comme imbriquer des pseudo-éléments div :: before :: before content: "; et plusieurs pseudo-éléments div :: before (3) content: "; ce qui ouvrira évidemment beaucoup plus de possibilités dans la pratique de la conception Web à l’avenir. Pendant qu'ils sont mis en œuvre dans les navigateurs actuels, attendons patiemment pour l'instant..
