Le “Generated Content” est une fonctionnalité CSS pratique et de plus en plus utilisée.

Cette méthode utilise les sélecteurs CSS ::before ou ::after, pour rajouter des éléments avant ou après le contenu déjà existant.

Exemple pour générer un cœur bleu avant un texte dans une liste :

.liste::before{ 
  content: "♥"; 
  padding-right: 8px; 
  color: blue; 
}

See the Pen generated content ♥ by Manuel Schmalstieg (@eracom) on CodePen.

Autre exemple: un aplat de couleur en dégradé est apposé “par dessus l’image”.

See the Pen Generated Content 2 by Manuel Schmalstieg (@eracom) on CodePen.

Le challenge du jour à compléter :

Exercice présenté le 5 octobre par Simon et Joël

https://codepen.io/eracom/pen/wveLPjN?editors=1100

See the Pen Generated Content 3 by Manuel Schmalstieg (@eracom) on CodePen.

Pour vous auto-corriger, voici un Codepen qui applique un fond avec une couleur-dégradé: https://codepen.io/eracom/pen/gORNXWz

Usages spectaculaires

Exemples combinant le Generated Content avec de l’animation:

Le site du WordCamp Europe 2017:

https://europe.wordcamp.org/2017/

La page CSS Zen Garden “Steel”, par Steffen Knoeller:

http://www.csszengarden.com/219/

Liens utiles

https://www.w3schools.com/cssref/pr_gen_content.asp

https://www.w3schools.com/cssref/pr_gen_counter-increment.asp

https://www.smashingmagazine.com/2013/04/css-generated-content-counters/