Saviez-vous que vous pouvez ajouter du contenu à votre site en utilisant du CSS ? 

Cela peut paraître fou mais c'est la vérité. Je vais vous montrer commenta ajouter du texte à un site internet en utilisant la propriété CSS content. Nous allons aussi utiliser les pseudos-éléments :before et :after. 

1ère étape. Le code HTML

Pour cet exemple, je vais utiliser le code HTML ci-dessous: 

<div class="content">
    <h2>Texte inséré en HTML (de façon habituelle)</h2>
</div>

Le sélecteur que l'on va utiliser est la class content, plus les pseudos-éléments :before and :after .

2ème étape. Insérer du texte avec du CSS

Commençons par construire le sélecteur CSS pour cibler l'élément de notre exemple de code HTML. Nous allons insérer du texte avant .content en utilisant le pseudo élément :before .

.content:before {
    content: 'Texte inséré avant, avec du CSS';
}

De façon similaire, nous pouvons utiliser le pseudo élément :after pour insérer du texte après la class .content.

.content:after {
    content: 'Texte inséré après, avec du CSS';
}

3ème étape. Vérifier le résultat

Ouvrez votre site avec votre navigateur préféré, et vous constaterez l'insertion du texte avant et après le code HTML.

Cet article est la traduction de "How to Insert Website Content With CSS" d'OSTraining.