Faire des notification avec ::after en css

Pourquoi utiliser le pseudo-élément ::after pour vos alertes ?

L’utilisation de ::before ou ::after présente trois avantages majeurs pour un projet moderne :

• DOM Allégé : Vous évitez la « divite » (l’excès de conteneurs HTML). Le badge n’existe que graphiquement via le CSS.
• Maintenance facilitée : Le style de vos notifications est centralisé. Un seul endroit pour modifier la couleur, la position ou l’animation de toutes vos alertes.
• Performance : Moins de nœuds HTML à calculer pour le navigateur signifie un rendu plus fluide, surtout sur les interfaces complexes.

Comment lier le CSS avec une variable contenu dans le HTML via attr()

C’est ici que réside la véritable puissance de cette méthode. Au lieu de coder en dur le chiffre « 3 » ou « New » dans votre CSS, on utilise la fonction attr().

Cette fonction permet au CSS de lire directement la valeur d’un attribut HTML .

***A savoir : que cette fonction n’est utilisable que sur les pseudo éléments ::after et ::before*** 

Pour aller plus loin: les développeurs rajoute souvent un data-attribute, couplé à la logique JavaScript ou PHP mettant l’attribut à jour, et le CSS s’occupe de l’affichage de façon instantané.

Créer un badge de notification dynamique

On commence par créer l’élément HTML

    <div class="notification-wrapper" data-badge="" >
      <i class="fi fi-sr-envelope"></i>
    </div>

ici une div ou l’on vient mettre l’attribut data et une icone de type mail.

On y ajoute le CSS:

.notification-wrapper{
    position:relative;
}

.notification-wrapper::after {
  /* La magie : on récupère la valeur de l'attribut HTML */
  content: attr(data-badge);

  /* Positionnement absolu par rapport au parent */
  position: absolute;
  top: -8px;
  right: -8px;

  /* Style visuel */
  background-color: #e74c3c;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  padding: 6px;
  border-radius: 50%;
  min-width: 20px;
max-height:20px;
  text-align: center;
  border: 2px solid white; /* Pour le faire ressortir */
}

i {
  font-size: 5rem;
  padding: 1rem;
}

Et cela donne une belle icone avec le nombre de nouveaux message, bien sur cela fonctionne aussi avec ::before

A voir : Créer une calculatrice simple avec Javascript

Bonus

Ajoutons un peude dynamisme avec Javascript:

// on cible la div contenant l'attribut data-*
const dataBadge = document.querySelector(".notification-wrapper");

let valueDataBadge = 5;

// et on change dynamiquement  la valeur grace à la variable
dataBadge.dataset.badge = valueDataBadge;

Et voila, comment faire pour concevoir des notifications avec un peu de CSS ET HTML .

Et pour allez plus loin, amusez vous a modifier le css :