Personnaliser le countdown (compte à rebours) en CSS

Le countdown peut être entièrement personnalisé via CSS.

L’objectif est de vous permettre d’adapter facilement son apparence (taille, couleurs, espacements, bordures, etc.) tout en gardant une base stable.

Structure CSS de base

Voici une structure CSS guidée que vous pouvez utiliser comme point de départ.

Chaque section correspond à une partie précise du composant.

1. Conteneur global

Le conteneur principal regroupe l’ensemble du countdown.

.p3-countdown {
  /* Fond global du countdown */
  /* background: */

  /* Espace intérieur global */
  /* padding: */

  /* Espace entre les blocs (Heure / Minute / Seconde) */
  /* gap: */
}

2. Blocs (heure / minute / seconde)

Chaque unité du countdown est contenue dans un bloc.

.p3-countdown .unit {
  /* Fond de chaque bloc */
  /* background: */

  /* Espace intérieur du bloc */
  /* padding: */
}

3. Chiffres (00, 12, etc.)

Cette partie concerne l’affichage des chiffres.

.p3-countdown .unit h3 {
  /* Taille des chiffres */
  /* font-size: */

  /* Couleur des chiffres */
  /* color: */

  /* Espace avec le texte */
  /* line-height: */
}

4. Textes (heure / minute / seconde)

Les labels sous les chiffres peuvent également être stylisés.

.p3-countdown .unit .secondary {
  /* Taille du texte */
  /* font-size: */

  /* Couleur du texte */
  /* color: */
}

Exemple d’ajustements

De notre côté, voici un exemple de quelques ajustements CSS afin d’améliorer le rendu global du countdown avec un séparateur “:” ajouté automatiquement entre les blocs pour améliorer la lisibilité.

.p3-countdown {
  gap: 30px;
}

.p3-countdown .unit {
  position: relative;
}

.p3-countdown h3.junipero {
  line-height: 33px;
}

.p3-countdown .unit:not(:last-child)::after {
  content: ":";
  position: absolute;
  right: -18px;
  top: 45%;
  transform: translateY(-50%);
  font-size: 24px;
}

Bonnes pratiques

Pour un rendu propre et cohérent :

• gardez des contrastes simples pour la lisibilité
• évitez de surcharger les blocs avec trop d’effets
• testez le rendu sur mobile

Mis à jour le : 12/06/2026