CSS's ::before et ::after les pseudo-éléments vous permettent d'utiliser tous les éléments non remplacés (par exemple, ils conviennent<div> Mais pas applicable<code><img alt="7 utilisations pratiques pour le :: avant et :: après des pseudo-éléments dans CSS" > ) Insérer "Contenu" avant et après. Cela vous permet en fait d'afficher du contenu sur une page Web qui peut ne pas exister dans le contenu HTML. Vous ne devez pas l'utiliser pour le contenu réel car il n'est pas si bon en termes d'accessibilité, car vous ne pouvez même pas sélectionner et copier du texte qui est inséré sur la page de cette manière - c'est juste du contenu décoratif. Dans cet article, je vous guiderai à travers sept exemples différents qui montrent comment créer des effets intéressants en utilisant ::before et ::after .
Notez que pour la plupart des exemples, j'explique uniquement les sections de code qui sont particulièrement pertinentes pour les pseudo-éléments CSS. Autrement dit, si vous voulez voir d'autres styles de code, tout le CSS est inclus dans la démo intégrée.
Lorsque les utilisateurs visitent votre site Web, leur connexion Internet (ou les facteurs indépendants de votre volonté) peut empêcher le téléchargement de votre image, de sorte que le navigateur affiche des icônes d'image corrompues et du texte alternatif pour l'image (s'il existe).
Comment utiliser à la place les espaces réservés personnalisés? Vous pouvez le faire en utilisant ::before et ::after et un positionnement CSS.
Tout d'abord, nous devons utiliser un positionnement relatif sur les éléments d'image. Nous utiliserons le positionnement absolu sur l'un des pseudo-éléments plus tard, donc cette position relative garantit que le pseudo-élément se trouve dans le contenu de l'élément d'image, plutôt que d'être complètement hors du flux de documents.
img {
Affichage: bloc; / * Évitez l'espace sous l'image causée par la hauteur de la ligne * /
Position: relative;
Largeur: 100%;
} Ensuite, utilisons le ::before la pseudo-élément de l'image pour créer une zone qui corrompt l'effet de l'image. Nous allons d'abord le styliser avec un fond gris clair et une bordure légèrement plus foncée.
img :: avant {
Color en arrière-plan: HSL (0, 0%, 93,3%);
Border: 1px en pointillé HSL (0, 0%, 66,7%);
/ * ... * /
}<img alt="7 utilisations pratiques pour le :: avant et :: après des pseudo-éléments dans CSS" > est un élément de remplacement. Pourquoi utiliser ::before pseudo-élément dessus? Cela ne fonctionne pas! correct. Dans ce cas, lorsque l'image ne se charge pas, le pseudo-élément sera affiché dans Chrome et Firefox, ce qui est exactement ce que vous voulez. Pendant ce temps, Safari affiche uniquement les styles appliqués au texte alternatif.
Le style s'applique au coin supérieur gauche de l'image corrompue.
Jusqu'à présent, tout s'est bien passé. Maintenant, nous pouvons le régler sur un élément au niveau du bloc ( display: block ) et lui donner une hauteur pour remplir l'ensemble de l'espace disponible.
img :: avant {
/ * ... * /
Affichage: bloc;
hauteur: 100%;
}Nous pouvons encore améliorer le style. Par exemple, contournons les coins. Nous devons également laisser un peu d'espace pour le texte alternatif en fournissant une largeur pleine largeur et un positionnement absolu pour les pseudo-éléments afin de mieux contrôler le placement du contenu où nous le voulons.
img :: avant {
/ * ... * /
Border-Radius: 4px;
contenu: "";
Position: absolue;
Largeur: 100%;
}Si vous vous arrêtez ici et vérifiez votre travail, vous pouvez vous gratter la tête car le texte alternatif disparaît soudainement.
En effet, nous définissons content sur une chaîne vide (nous devons afficher le contenu et les styles que nous avons générés) et écraser tout l'espace, y compris le texte alternatif réel. C'est là, nous ne pouvons tout simplement pas le voir.
Nous pouvons afficher le texte alternatif par substitution (obtenir?), Cette fois à l'aide du ::after pseudo-élément. content peut réellement utiliser attr() pour afficher alt de l'image:
img :: après {
Contenu: att (alt);
/ * Quelques styles simples * /
Police-poids: Bold;
Position: absolue;
hauteur: 100%;
gauche: 0px;
Texte-aligne: Centre;
en haut: 1px;
Largeur: 100%;
}C'est génial! Au moins dans Chrome.
Cependant, ce n'est pas le cas dans Firefox.
Une solution de contournement rapide consiste à utiliser le sélecteur de propriétés (dans ce cas img[alt] ) pour localiser directement l'attribut alt et positionner des styles similaires pour correspondre à Chrome.
img [alt] {
Texte-aligne: Centre;
Police-poids: Bold;
Couleur: HSL (0, 0%, 60%);
}Nous avons maintenant un excellent espace réservé cohérent dans Chrome et Firefox.
Les citations de blocs sont des citations ou des extraits des œuvres. Ils offrent également une très bonne occasion de briser un mur de texte avec un contenu visuellement intéressant.
Il existe différentes façons de styliser des références de blocage. Chris a un set à cinq styles qui remonte à 2007.
Je veux regarder une autre technique, qui se combine ::before et ::after . Comme nous l'avons vu dans l'exemple précédent, nous pouvons utiliser content pour afficher le contenu généré et appliquer d'autres propriétés pour la décorer. Mettons de grandes citations au début et à la fin de la référence du bloc.
HTML est simple:
<blockquote> </blockquote>
Quelques décorations dans CSS:
Blockquote {
Style de police: italique;
hauteur de ligne: 1,618;
taille de police: 1.2EM;
Largeur: 30EM;
Position: relative;
rembourrage: 40px 80px;
} Notez position: relative , car comme vous l'apprendrez, il est crucial pour le positionnement des références de blocs.
Comme vous pouvez le deviner, nous utiliserons ::before la première citation et ::after pour le devis final. Maintenant, nous pouvons simplement appeler content sur les deux et générer la balise. Cependant, CSS nous fournit des valeurs open-quote et close-quote .
Blockquote :: avant {
Contenu: Quétique ouverte;
/ * Placez-le dans le coin supérieur gauche * /
en haut: 0;
à gauche: 0;
}
Blockquote :: après {
Contenu: Close-Quote;
/ * Placez-le dans le coin inférieur droit * /
en bas: 0;
à droite: 0;
}Cela nous donne les citations que nous voulons, mais je me permets de trier un peu les styles:
Blockquote :: avant,
Blockquote :: après {
Background-Color: #CCCCCCCC;
Affichage: bloc;
Largeur: 60px;
hauteur: 60px;
hauteur de ligne: 1,618;
taille de police: 3EM;
Border-Radius: 100%;
Texte-aligne: Centre;
Position: absolue;
} Nous avons de l'ordre dans HTML (<ol></ol> ) et le trouble (<ul></ul> ) Liste. Les deux ont des styles par défaut déterminés par la feuille de style de l'agent utilisateur du navigateur. Cependant, en utilisant ::before les pseudo-éléments, nous pouvons remplacer ces styles "par défaut" avec notre propre contenu. Devinez quoi? Nous pouvons utiliser des emojis (?) Sur content !
.Name-list li :: avant {
contenu: "?";
marge-droite: 15px;
taille de police: 20px;
} Bien que cela soit bon, il convient de noter que nous pouvons réellement utiliser ::marker qui est spécifiquement utilisé pour styliser les marqueurs de liste. Eric Meyer nous montre comment cela fonctionne, ce qui peut être une meilleure approche à long terme.
L'une des astuces les plus intelligentes pour styliser un formulaire consiste à créer des commutateurs à bascule à l'aide de la case HTML standard. En fait, Preethi Sam a récemment partagé un moyen lors de la montre d'autres conseils de style à cocher à l'aide de masques CSS.
Comme son nom l'indique, l'interrupteur à bascule est utilisé pour basculer ou changer les états sélectionnés et non sélectionnés des éléments de case.
<label> <input type="checkbox"> </label>
Toutes les personnalisations sont dues à être ajoutées au ::before et ::after les pseudo-éléments<label></label> Modification des éléments. Mais d'abord, voici quelques-uns<label></label> CSS de base pour les éléments:
.Container {
Contexte: # 212221;
Contexte: Linear-Gradient (à droite, # 1560BD, # E90);
Border-Radius: 50px;
hauteur: 40px;
Position: relative;
Largeur: 75px;
}Nous masquerons l'apparence par défaut de la case à cocher tout en prenant tout espace. Étrange? Il est invisible, mais techniquement, il existe toujours. Nous faisons cela par:
saisir {
-Webkit-apparence: aucun; / * safari * /
curseur: pointeur; / * montre que c'est un élément interactif * /
hauteur: 100%;
Position: absolue;
Largeur: 100%;
} Maintenant utilisons son ::before les paramètres pseudo-élémentaires<input> Style d'éléments. Ce style changera l'apparence de l'entrée, nous rapprochant du résultat final.
entrée :: avant {
Contexte: #FFFF;
Border-Radius: 50px;
contenu: "";
hauteur: 70%;
Position: absolue;
en haut: 50%;
Transform: traduire (7px, -50%);
Largeur: 85%;
} Quoi, attendez? Vous pourriez penser que ::before ne fonctionne pas avec les éléments de remplacement, par exemple<input> . Ceci est correct, mais seulement si le type d'entrée est une image, cela équivaut à<img alt="7 utilisations pratiques pour le :: avant et :: après des pseudo-éléments dans CSS" > élément. Les autres contrôles de formulaire (tels que les cases à cocher) sont définis comme des éléments non remplacés dans la spécification HTML.
Ensuite, nous devons créer le bouton "Toggle", ce qui se produit que nous pouvons toujours créer en utilisant le ::after Pseudo-Element. Cependant, il y a deux points à mentionner:
transform pour passer à<input> le centre de. entrée :: après {
Contexte: Linear-Gradient (à droite, orange, # 8E2DE2);
Border-Radius: 50px;
contenu: "";
hauteur: 25px;
Opacité: 0,6;
Position: absolue;
en haut: 50%;
Transform: traduire (7px, -50%);
Transition: Tous .4S;
Largeur: 25px;
} Essayez de cliquer sur le bouton basculer. Rien ne s'est passé. C'est parce que nous n'avons pas vraiment changé<input> État sélectionné. Même si nous le changeons, le résultat est… désagréable.
La solution consiste à appliquer la propriété :checked à<input> :: ::after pseudo-élément. En positionnant spécifiquement l'état sélectionné de la case à cocher et en le liant au ::after pseudo-élément, nous pouvons remettre le bouton à bascule vers sa position d'origine.
Entrée: vérifié :: après {
Opacité: 1;
Transformer: traduire (170%, -50%);
} Nous pouvons décorer des images avec des frontières pour les faire ressortir ou se fondre de manière plus transparente dans la conception. Saviez-vous que nous pouvons utiliser des gradients sur les frontières? Eh bien, nous pouvons utiliser ::before (et bien sûr il existe d'autres façons).
L'idée principale est de créer un gradient sur l'image et d'utiliser l'attribut CSS z-index et les valeurs négatives. Les valeurs négatives tirent le gradient sous l'image dans l'ordre d'empilement. Cela signifie que l'image est toujours affichée sur le dessus tant que le gradient a un z-index négatif.
.Gradient-fronder :: avant {
/ * Donner un style * /
contenu: "";
/ * Remplissez tout l'espace * /
Position: absolue;
en haut: 0;
à gauche: 0;
en bas: 0;
à droite: 0;
/ * Créer un gradient * /
Image en arrière-plan: gradient linéaire (# 1A1A1A, # 1560BD);
/ * Empiler les gradients derrière l'image * /
Z-Index: -1;
}
chiffre {
/ * Supprimer la marge par défaut * /
marge: 0;
/ * Serrez l'image pour afficher le gradient derrière * /
rembourrage: 10px;
}Ceci est similaire à ce que nous avons fait dans l'exemple précédent, mais nous appliquons ici un gradient en haut de l'image. Pourquoi faisons-nous cela? Cela peut être un excellent moyen d'ajouter de la texture et de la profondeur à l'image. Alternativement, s'il y a du texte sur le dessus qui nécessite un contraste supplémentaire pour améliorer la lisibilité, il peut être utilisé pour égayer ou assombrir l'image.
Bien que cela soit similaire à ce que nous venons de faire, vous remarquerez quelques différences évidentes:
Figure :: avant {
Image d'arrière-plan: gradient linéaire (en haut à droite, # 1A1A1A, transparent);
contenu: "";
hauteur: 100%;
Position: absolue;
Largeur: 100%;
} L'avez-vous vu? Il n'y a pas z-index car il est acceptable d'empiler les gradients sur l'image. Nous introduisons également la transparence dans le gradient d'arrière-plan, ce qui permet à l'image d'être affichée via le gradient. Vous savez, comme la superposition.
La plupart, sinon tous, nous essayons de personnaliser le style par défaut des boutons radio HTML, ce qui est généralement fait avec ::before et ::after , tout comme nous l'avons fait avec les cases à cocher avant.
Nous avons d'abord établi quelques styles de base, juste pour nous préparer:
/ * Centre tous les contenus * /
.flex-center {
Align-Items: Centre;
Affichage: flex;
Justification-contenu: centre;
}
/ * Style d'élément de forme * /
.formulaire {
Contexte: #ccc;
Hauteur: 100VH;
Largeur: 100%;
}
/ * Style entré * /
.form-Row {
Contexte: #FFFF;
Border-Radius: 50px;
hauteur: 40px;
marge: 10px;
débordement: caché;
Position: relative;
Largeur: 150px;
} Utilisons maintenant appearance: none; pour supprimer le style par défaut du bouton radio:
.Form-Input {
-Webkit-apparence: aucun; / * safari * /
Apparence: aucun;
} ::before devrait être dans le coin supérieur gauche du bouton radio, et lorsqu'il est sélectionné, nous changerons sa couleur d'arrière-plan.
.form-Input :: avant {
/ * Donner un style * /
contenu: '';
/ * Montrez qu'il est interactif * /
curseur: pointeur;
/ * Positionnez-le dans le coin supérieur gauche de l'entrée * /
Position: absolue;
en haut: 0;
à gauche: 0;
/ * Occupe tout l'espace * /
hauteur: 100%;
Largeur: 100%;
}
/ * Lorsque l'entrée est sélectionnée ... * /
.Form-Input: vérifié :: avant {
/ * Changer la couleur d'arrière-plan * /
Contexte: # 21209C;
} Nous devons encore utiliser ::after pour résoudre certains problèmes. Plus précisément, lorsque le bouton radio est sélectionné, nous voulons changer la couleur de l'anneau circulaire en blanc car dans son état actuel, l'anneau est bleu.
.form-Input :: After {
/ * Donner un style * /
contenu: '';
/ * Montrez qu'il est interactif * /
curseur: pointeur;
/ * Quelques styles de bordure * /
Border-Radius: 50px;
Border: 4px solide # 21209c;
/ * Anneau de positionnement * /
Position: absolue;
Gauche: 10%;
en haut: 50%;
Transform: traduire (0, -50%);
/ * Définir la taille * /
hauteur: 15px;
Largeur: 15px;
}
/ * Lorsque l'entrée est sélectionnée ... * /
.Form-INPUT: Vérifié :: After {
/ * Changez la bordure de :: After en blanc * /
Border: 4px solide #ffffff;
}La balise de formulaire n'est toujours pas disponible ici. Nous devons localiser directement l'étiquette de formulaire pour ajouter la couleur, et lorsque l'entrée de formulaire est sélectionnée, nous modifions la couleur en couleur visible.
.form-label {
Couleur: # 21209C;
taille de police: 1.1rem;
marge-gauche: 10px;
} Cliquez sur le bouton et il n'y a toujours rien à réagir. Que se passe-t-il? position: absolute on ::before et ::after obscurci le contenu lorsque le bouton radio est sélectionné, car tout ce qui se produit dans la hiérarchie du document HTML est obscurci à moins qu'ils soient déplacés vers un nouvel emplacement dans le document HTML, ou leur emplacement a été modifié à l'aide de CSS. Par conséquent, chaque fois qu'un bouton radio est sélectionné, son étiquette est écrasée.
Vous savez probablement déjà comment résoudre ce problème, car nous avons déjà résolu un problème similaire dans un autre exemple? Nous appliquons z-index: 1 (ou position: absolute ) pour former des balises.
.form-label {
Couleur: # 21209C;
taille de police: 1.1rem;
marge-gauche: 10px;
Z-index: 1;
/ * Position: absolue;
} Nous avons couvert sept façons différentes de créer des effets intéressants en utilisant ::before et ::after des pseudo-éléments, personnaliser les styles par défaut, créer des espaces réservés utiles et ajouter des frontières aux images.
Nous ne couvrons en aucun cas toutes les possibilités qui peuvent être déverrouillées lors de la mise à profit de ces autres éléments qui peuvent être sélectionnés à l'aide de CSS. Cependant, Lynn Fisher en a fait un passe-temps, en utilisant un seul élément pour créer des conceptions incroyables. Et n'oublions pas l'art CSS de Diana Smith, qui utilise des pseudo-éléments à plusieurs endroits pour des effets de peinture réalistes.
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!
Introduction à l'utilisation de la fonction sort() en python
Qu'est-ce qu'un plug-in de navigateur
Pilote de carte son pour ordinateur portable
Comment changer le mot de passe dans MySQL
Quelles sont les solutions de stockage Big Data ?
Comment télécharger et enregistrer les vidéos phares du jour
Comment utiliser la fonction mois
Nettoyer les fichiers indésirables dans Win10
orientéb
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
