Introduction à trois utilisations des pseudo-éléments CSS ::before et ::after (exemples de code)

Cet article partagera avec vous trois utilisations des pseudo éléments ::before et ::after en CSS. Les amis dans le besoin peuvent s'y référer.

Pour les pseudo-éléments ::before et ::after, un bon a été créé en utilisant le pseudo-élément :after en CSS dans l' article précédent Overlay effet. Mais à part cela, ils ont bien d’autres utilisations. Cet article vous présentera trois autres utilisations de ::before et ::after.

Tout d’abord, jetons un bref aperçu du fonctionnement des pseudo-éléments.

Remarques sur l'utilisation de ::after et ::before

Le navigateur affichera ces éléments sous forme de "contenu généré". La valeur peut être définie sur une chaîne vide : content: "";.

Lorsque le navigateur insère cet élément dans le DOM, il l'insère dans l'élément utilisé pour le sélecteur. Voici la définition de la spécification :

::before représente un pseudo-élément enfant stylable avant le contenu réel de l'élément d'origine

::after immédiatement après le contenu réel de l'élément d'origine Représente un pseudo-élément enfant stylable.

Par défaut, ce nouvel élément sera un élément en ligne. Une fois qu'un élément est inséré dans le DOM, il peut être modifié comme n'importe quel autre élément. Cela nous donne beaucoup de contrôle sur l’obtention de divers éléments.

Important : Toutes les combinaisons navigateur/lecteur d'écran ne peuvent pas lire le contenu que vous placez dans le pseudo-élément de contenu. Cela ne doit être utilisé que pour les éléments de texte. Le contenu réel doit toujours être ajouté au balisage de la page.

Ajouter des icônes à côté de certains types de liens

Si vous souhaitez donner à l'utilisateur plus d'informations visuelles sur le lien, vous pouvez ajouter une icône en utilisant ::after à la place Aucune balise n'est ajoutée.

Ajoutez l'icône "Lien externe" aux liens qui ne sont pas des liens absolus.

a[href^="http"]::after {
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/161359/open-in-new.svg);
    background-size: contain;
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

Dans ce code, en supposant que les liens internes sont écrits sous forme de chemins relatifs, nous trouvons toute balise d'ancrage qui a un élément href commençant par http.

Un autre bon exemple de cette méthode utilisée est PDF

a[href$=".pdf"]::after {
    content: " (pdf)";
    font-size:  .8em;
    color: tomato;
}

Pour tout href se terminant par .pdf, nous pouvons ajouter la chaîne "(pdf)." plus facile à contrôler que les images car nous disposons de contrôles CSS complets pour ajuster la taille de la police, la couleur et tout autre effet.

Pour plus d'informations sur ces sélecteurs, vous pouvez vous référer au manuel css en ligne sur le site PHP chinois.

Ajoutez des "bordures" intéressantes aux conteneurs

Avant que l'API Houdini Paint ne soit disponible sur tous les navigateurs, vous trouverez peut-être vos éléments très ennuyeux. Mais en utilisant du CSS simple et ::before et ::after, vous pouvez obtenir des effets plus intéressants sur tous les navigateurs.

.related-article {  
    padding: 20px;
    position: relative;
    background-image: linear-gradient(120deg,#eaee44,#33d0ff);
}
.related-article * {
    position: relative; // Set stacking context to keep content on top of the background
}
.related-article::before {
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
}

Dans cet exemple, nous appliquons un dégradé d'arrière-plan à l'élément parent et utilisons un élément ::before pour "découper" l'intérieur avec une simple couleur d'arrière-plan. Cela donne l'apparence d'une bordure bien qu'il s'agisse de deux rectangles. Pour que les dimensions s'adaptent à la bordure, il suffit de quelques calculs simples.

En positionnant un pseudo-élément en valeur absolue, on peut contrôler sa position. Sass facilite les opérations mathématiques avec des variables et des fonctions mathématiques.

Et si, au lieu d'une bordure complète, nous souhaitions que nos titres aient de petites bordures fantaisistes en dessous ?

Nous pouvons utiliser l'élément ::after pour y parvenir.

.cool-border::after {
    content: "";
    display: block;
    height: 7px;
    background-image: linear-gradient(120deg, #e5ea15, #00c4ff);
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    width: 45%;
    transform: translateX(-50%) skew(-50deg);}.cool-border {
    position: relative;
}

Dans cet exemple, on place également le pseudo-élément en position absolue. La taille de notre "bordure" dépend de la hauteur du nouvel élément. S'il s'agit d'une "bordure" droite ou gauche, vous pouvez utiliser la largeur de l'élément pour déterminer la taille.

Comme il ne s'agit que d'un élément de la page, nous pouvons également biaiser les bordures.

Ajouter des éléments de style qui ne nécessitent pas l'ajout de balises de style

b8a712a75cab9a5aded02f74998372b4 Ne le gâchons pas avec un balisage supplémentaire.

Dans de nombreux exemples ::after (y compris d'autres dans cet article), vous pouvez voir la position du pseudo-élément : absolue, et bien sûr, il n'y a aucune règle disant que cela doit être le cas.

Utilisons ::before et ::after comme éléments de grille pour placer des guillemets sur un b8a712a75cab9a5aded02f74998372b4.

En plaçant tout explicitement sur la grille, nous n'avons pas à nous soucier des emballages supplémentaires. Nous pouvons également utiliser des guillemets comme images d'arrière-plan et leur permettre une mise à l'échelle minimale dans notre simple fonction grille-modèle-colonnes.

Enfin

En fait, il existe de nombreuses utilisations pour les pseudo-éléments CSS ::after et ::before, et vous devriez également les utiliser dans des applications pratiques. Il y en a de meilleurs. Bienvenue pour laisser un message pour discuter de l'utilisation.

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!