...
  • (+33) 06 66 45 20 34
  • info@storycom.fr
Youtube Instagram Facebook Linkedin

Découvrez les secrets des pseudo-éléments CSS : ::before, ::after et bien plus pour des designs élégants

Catégories

Si vous avez besoin d’un site internet, vous êtes au bon endroit. Nous sommes conscients que chaque client est particulier et ses besoins le sont tout autant, c’est pourquoi nous nous adaptons à votre demande, votre besoin et votre budget afin de composer et créer un site internet au plus proche de vos attentes.

Votre devis ici

Sommaire

Introduction aux pseudo-éléments CSS

Les pseudo-éléments CSS, comme ::before et ::after, sont des outils puissants pour enrichir vos designs sans alourdir votre code HTML. Ils permettent d’ajouter du contenu ou des styles de manière dynamique et élégante. Dans cet article, nous explorerons les différentes façons d’utiliser ces pseudo-éléments pour créer des interfaces utilisateur plus attrayantes et fonctionnelles.

Syntaxe et propriétés applicables

Les pseudo-éléments s’écrivent avec deux-points doubles (::before, ::after, etc.). Les navigateurs acceptent aussi la notation à un seul deux-points pour des raisons de rétro-compatibilité (:before, :after).

La propriété obligatoire pour les pseudo-éléments est content. Sans content (ou avec none/normal), le pseudo-élément n’est pas rendu. Les valeurs de content peuvent être une chaîne de texte, une URL d’image, des caractères Unicode, ou la fonction attr pour récupérer une valeur d’attribut.

Par défaut, les pseudo-éléments sont affichés en inline. Vous pouvez changer cet affichage (block, inline-block, list-item, etc.). Les pseudo-éléments acceptent quasiment toutes les propriétés de mise en forme (couleur, fond, bordure, taille, transform, opacity, z-index, etc.). Certaines pseudo-éléments spéciaux (::first-line, ::first-letter) n’acceptent qu’un sous-ensemble de propriétés.

Cas d’usage classiques et techniques créatives

Les pseudo-éléments CSS offrent une multitude de possibilités pour améliorer vos designs. Voici quelques exemples d’utilisation :

Icône décorative avant un lien

Ajoutez un symbole sans toucher au HTML :

a::before { content: "🔗"; margin-right: .4em; }

Citation typographique

Créez des guillemets stylisés autour du texte :

blockquote::before { content: "“"; font-size: 3rem; margin-right: .2em; }
blockquote::after { content: "”"; font-size: 3rem; margin-left: .2em; }

Marqueur de liste personnalisé

Générez des éléments de liste avant/après la <ul> et stylisez leurs marqueurs :

ul::before, ul::after { display: list-item; color: orange; }
ul::before { content: "Début"; }
ul::after { content: "Fin"; }

Bordure dégradée

Créez une bordure sans ajouter d’élément supplémentaire :

.card { position: relative; padding: 1rem; }
.card::before { content: ""; position: absolute; inset: 0; border: 4px solid transparent; background: linear-gradient(to right, #ff7e5f, #feb47b); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; }

Overlay d’image au survol

Générez un overlay avec ::after :

.img-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .3s; }
.img-wrap:hover::after { opacity: 1; }

Bouton hamburger animé

Créez un bouton hamburger avec des pseudo-éléments :

.hamburger { position: relative; width: 30px; height: 3px; background: #333; transition: background .3s; }
.hamburger::before, .hamburger::after { content: ""; position: absolute; width: 30px; height: 3px; background: #333; transition: transform .3s; }
.hamburger::before { top: -8px; }
.hamburger::after { top: 8px; }
.hamburger.active { background: transparent; }
.hamburger.active::before { transform: rotate(45deg) translate(5px,5px); }
.hamburger.active::after { transform: rotate(-45deg) translate(5px,-5px); }

Case à cocher personnalisée

Créez une case à cocher personnalisée avec ::before/::after :

.custom-checkbox { display:none; }
.custom-checkbox + label { position:relative; padding-left:2rem; cursor:pointer; }
.custom-checkbox + label::before { content:""; position:absolute; left:0; top:0; width:1.5rem; height:1.5rem; border:2px solid #555; }
.custom-checkbox:checked + label::after { content:"✔"; position:absolute; left:.3rem; top:.1rem; font-size:1.2rem; color:#0a0; }

Bonnes pratiques

Pour utiliser efficacement les pseudo-éléments CSS, voici quelques bonnes pratiques à suivre :

Structure du CSS

Groupez les pseudo-éléments avec le sélecteur d’origine pour garder la lisibilité :

.button { ... }
.button::before { ... }
.button::after { ... }

Utilisation de content et attr

Utilisez attr(data-label) pour refléter dynamiquement un attribut HTML :

.tooltip::after { content: attr(data-tip); }

Variables CSS

Définissez des couleurs ou tailles dans :root et réutilisez-les dans les pseudo-éléments :

:root { --accent:#ff7e5f; }
.box::before { background: var(--accent); }

Pré-processeurs

Créez des mixins Sass pour les bordures ou overlays afin de réutiliser le même code :

@mixin gradient-border($color1,$color2){
  position:relative;
  &::before{content:"";position:absolute;inset:-2px;background:linear-gradient(to right,$color1,$color2);z-index:-1;}
}
.card{@include gradient-border(#ff7e5f,#feb47b);}

Tailwind CSS

Utilisez les variantes before: / after: et la utility content-['...'] pour éviter du CSS custom :

Lien

Transitions et animations

Animez les propriétés transform/opacity plutôt que width/height :

.box::after{transition:opacity .3s;}
.box:hover::after{opacity:1;}

Gestion du z-index

Le pseudo-élément partage le même contexte d’empilement que son parent. Définissez explicitement z-index si l’ordre visuel est crucial.

Dégradation progressive

Fournissez un fallback HTML (ex. <span class="icon"></span>) pour les navigateurs très anciens (IE 😎 qui ne supportent pas ::before/::after.

Pièges et limitations courants

Il est important de connaître les pièges et limitations des pseudo-éléments pour les utiliser efficacement :

Éléments remplacés

::before/::after ne fonctionnent pas sur <img>, <input type="file">, etc., car ils n’ont pas de boîte de contenu.

Absence de content

Le pseudo-élément est traité comme display:none.

Héritage limité

Seules les propriétés naturellement héritables sont propagées. Des propriétés comme margin ou padding ne s’appliquent pas automatiquement.

Accessibilité

Le contenu généré n’est pas lu par la plupart des lecteurs d’écran. Ne jamais placer d’information indispensable dans ::before/::after.

Compatibilité IE 6-7

Aucune prise en charge. IE 8 support partiel (z-index ignoré).

Performance

Un usage excessif (ex. centaines de pseudo-éléments animés) peut alourdir le calcul du style, surtout si des propriétés déclenchant le re-flow sont animées (width, height).

Compatibilité navigateurs et stratégies de fallback

Les pseudo-éléments CSS sont supportés par la plupart des navigateurs modernes, mais il est important de connaître les différences de compatibilité :

Navigateurs desktop

Chrome ≥ 2, Firefox ≥ 3.5, Safari ≥ 1.3, Edge ≥ 12, IE 9+ (partiel), IE 8 (partiel), IE 6-7 (non supporté).

Mobile

Chrome Android, Safari iOS, Firefox Android et les navigateurs modernes supportent pleinement les pseudo-éléments.

Fallback

Ajoutez un petit élément HTML (ex. <span class="icon"></span>) qui sera affiché lorsque le pseudo-élément n’est pas supporté. Vous pouvez également fournir une classe utilitaire qui désactive le style via @supports not (content: "") { ... }.

Impact sur les performances et optimisation

Les pseudo-éléments CSS ont un impact minimal sur les performances, mais il est important de les utiliser de manière optimale :

Coût faible

Les pseudo-éléments sont générés par le moteur de rendu sans créer de nœuds DOM supplémentaires, ce qui réduit le coût de manipulation du DOM.

Animations fluides

Privilégiez transform et opacity (GPU-accelerated) plutôt que width/height.

Réduction du CSS

Centralisez les décorations via pseudo-éléments pour éviter la duplication de balises et diminuer le poids du HTML.

Mise en cache

Les images utilisées avec content:url sont mises en cache comme tout autre asset, mais attention aux requêtes supplémentaires si chaque pseudo-élément charge une image différente.

Considérations d’accessibilité

Pour garantir l’accessibilité de vos designs, voici quelques considérations importantes :

Contenu décoratif

Laissez content: "" ou content: " " et ajoutez aria-hidden="true" sur l’élément parent si le pseudo-élément représente uniquement un visuel.

Contraste

Les couleurs appliquées aux pseudo-éléments doivent respecter le ratio WCAG ≥ 4.5 : 1 pour le texte et ≥ 3 : 1 pour les éléments graphiques.

Ne pas remplacer du texte réel

Les lecteurs d’écran ne lisent pas le texte généré, donc les informations essentielles doivent rester dans le DOM.

Masquage visuel

Pour cacher un pseudo-élément tout en le maintenant accessible, utilisez content: " "; avec position:absolute; left:-9999px;.

Exemples de code complets

Voici quelques exemples de code complets pour illustrer l’utilisation des pseudo-éléments CSS :

Icône avant un lien avec variable CSS et fallback

Documentation
:root { --link-icon: attr(data-icon string); }
.link::before{
  content: var(--link-icon);
  margin-right: .3rem;
}
@supports not (content: var(--link-icon)){
  .link::before{content:"🔗";}
}

Bordure dégradée réutilisable (Sass mixin)

@mixin gradient-border($c1,$c2){
  position:relative;
  &::before{
    content:"";
    inset:-2px;
    position:absolute;
    background:linear-gradient(to right,$c1,$c2);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:-1;
  }
}
.card{ @include gradient-border(#ff7e5f,#feb47b); padding:1rem; }

Overlay d’image au survol (Tailwind)

 
 
 
/* tailwind.config.js – ajout de la variante after */
module.exports = {
  variants: {
    extend: { opacity: ['after'] },
    after: ['responsive','hover'],
  },
  plugins: [
    require('@tailwindcss/forms')
  ]
}

.after:opacity-0::after{content:""; inset:0; position:absolute; background:rgba(0,0,0,.4); opacity:0; transition:opacity .3s;}
.hover:after:opacity-100:hover::after{opacity:1;}

Checkbox personnalisée avec attr et ARIA

 
.checkbox-label{
  position:relative;
  padding-left:2rem;
  cursor:pointer;
}
.checkbox-label::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:1.5rem; height:1.5rem;
  border:2px solid #555;
  background:#fff;
}
#agree:checked + .checkbox-label::after{
  content:attr(data-check "✔");
  position:absolute;
  left:.35rem; top:.1rem;
  font-size:1.2rem;
  color:#0a0;
}

Bouton animé avec pseudo-éléments (hardware-accelerated)

.btn{
  position:relative;
  overflow:hidden;
  background:#3498db;
  color:#fff;
  padding:.6rem 1.2rem;
  border:none;
  cursor:pointer;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.4),transparent);
  transform:translateX(-100%);
  transition:transform .5s;
}
.btn:hover::after{
  transform:translateX(100%);
}

Ces exemples illustrent comment exploiter la puissance des pseudo-éléments pour réduire le markup, créer des effets visuels avancés, et maintenir une base de code claire et accessible. Pour en savoir plus sur les techniques avancées en CSS, consultez notre article sur les animations CSS et notre guide sur les sélecteurs CSS.

Sources

Ces articles peuvent vous intéresser

Seraphinite AcceleratorOptimized by Seraphinite Accelerator
Turns on site high speed to be attractive for people and search engines.