before after

::before

Le sélecteur ::before permet d'ajouter un contenu au début d'un élément.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> before  </title>
        <style>
            article{
                border: 1px solid brown;
            }
            
            /* affichage du mot 'théorème' en début d'énoncé. */
            article::before{
                content: 'Théorème.';
                color: red;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
           <article class="theoreme">
            <p> Soient <var>a, b, c</var> trois réels. Toute équation de la forme \( ax^2+bx+c= 0 \) d'inconnue réelle <var>x</var> odmet 0 ou 1 ou 2 solutions.</p>
           </article>
    </body>
</html>

::after

Le sélecteur ::after permet d'ajouter un contenu à la fin d'un élément.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> before  </title>
        <style>
            article{
                border: 1px solid brown; 
            }
            article::before{
                content: 'Théorème.';
                color: red;
                font-weight: bold;
            }
            
            /* affichage d'un petit carré vert en fin d'énoncé. */
            article::after{
                display: inline-block;
                margin-left: 95%;
                content : '';
                width: 10px;
                height: 10px;
                background-color : green;
            }
        </style>
    </head>
    <body>
           <article class="theoreme">
                <p> 
                    Soient <var>a, b, c</var> trois réels. 
                    Toute équation de la forme   ax<sup>2</sup>+bx+c= 0  
                    d'inconnue réelle <var>x</var> admet 0 ou 1 ou 2 solutions.
                </p>
           </article>
    </body>
</html>

Compteurs

L'un des usages utiles de ::before (ou ::after) est d'ajouter des compteurs.

C'est ainsi que les paragraphes de cette page sont numérotées. C'est le cas également pour la numérotation des exercices des pages d'exercices.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> before  </title>
        <style>
             body {
                counter-reset: thm; /* compteur de théorème mis à 0 en début de page */
             }
             article.theoreme{
                counter-increment: thm; /* on ajoute 1 au compteur de théorème
                                            à chaque article de class theoreme */
                border: 1px solid brown; 
                margin-bottom: 5px;
            }
             article.theoreme::before{
                content: 'Théorème ' counter(thm)'.';/* au début du théorème, on écrit théorème avec son numéro.*/
                color: red;
                font-weight: bold;
            }
            
        </style>
    </head>
    <body>
           <article class="theoreme">
                <p> 
                    Soient <var>a, b, c</var> trois réels. 
                    Toute équation de la forme   ax<sup>2</sup>+bx+c= 0  
                    d'inconnue réelle <var>x</var> admet 0 ou 1 ou 2 solutions.
                </p>
           </article>
           
           <article class="theoreme">
                <p> 
                     Dans un triangle ABC rectangle en A, on a : AB<sup>2</sup> + AC<sup>2</sup> = BC<sup>2</sup>.
                </p>
           </article>
    </body>
</html>