Tuto CSS-SASS

Propriété Content CSS

Comment et pourquoi utiliser la propriété "content" en CSS? La propriété CSS "content" sert à insérer du contenu sous forme de chaîne de caractère à la suite ou à l'avant d'un bloc HTML. Grâce à la propriété "content", on peut par exemple ajouter un mot ou une phrase récurrente pour débuter chaque paragraphe d'une même page web.

Content CSS Before

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Content CSS Before</title>
    <style>
        .cible::before{
            content: " (Nous vous rappelons que l'abus d'alcool est dangereux pour la santé)";
            color: red;
        }
    </style>
</head>
<body>
    <span class="cible"> Un verre de vin par repas protège des affections cardio-vasculaires</span>
</body>
</html>

Content CSS after

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Content CSS After</title>
    <style>
        .cible::after {
            content: " (il faut distinguer la publicité trompeuse de la publicité mensongère)";
            color: red;
        }
    </style>
</head>
<body>
    <span class="cible">Liberté Égalité Fraternité </span>
</body>
</html>

Content CSS attribut

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Content CSS Attribut</title>
    <style>
        .cible::after {
            content: "" attr(citation) "";
            color: red;
        }
    </style>
</head>
<body>
    <span class="cible" citation="Ô rage, ô désespoir, ô vieillesse ennemie">Jacques a dit: </span>
</body>
</html>