Comment modofier le texte d’un élément HTML avec le CSS ?

Dans l’exemple ci dessous nous allons remplacer, avec le CSS, le fameux ‘Hello Word’ par ‘Bonjour Monde’.

Le code HTML (que nous n’allons pas modifier) est le suivant : 

1. <p class="content">Hello Word</p>

Nous allons nous baser sur la classe ‘content’ pour traduire notre paragraphe.

Pour commencer, utilisons la technique qui consiste à mettre en retrait négative le contenu du paragraphe et de réduite la hauteur de ligne à zéro.

1. .content {
2. text-indent: -9999px;
3. line-height: 0;
4. }

Puis il suffit de créer du contenu via le CSS avec l’attribut content: "Bonjour Monde!"; et remettre l’interlignage à la valeur initiale pour ce dernier. Cependant il faut que ce contenu appartienne à une nouvelle ligne (l’ancienne se situe à -9999px du bord gauche de la page) gràce à l’attribut CSS display: block; et supprimer le retrait en fixant sa valeur à zéro.

1. .content::after {
2. content: "Bonjour Monde!";
3. text-indent: 0;
4. display: block;
5. line-height: initial;
6. }

Le pseudo-élément after est nécessaire sinon l’ancien texte sera situé à gauche de la page (voir l’affichage ci-dessous)

Affichage si before

Testez vous-même le code sur Codepen

Changer avec Font-size

Une autre solution consiste à réduire la taille du texte d’origine à zéro et redéfinir à la valeur initiale la taille du contenu ajouté par le CSS. Une méthode bien plus simple à mon avis. 

1. .content {
2. font-size: 0;
3. }
4. 
   
5. .content::before {
6. content: "Bonjour Monde!";
7. font-size: initial;
8. }

Testez vous-même le code sur Codepen

Changer le texte d’un bouton d’envoi (submit) en CSS

Malheureusement il n’est pas possible de le faire avec le CSS en utilisant un pseudo -élément. Deux astuces existent néanmoins.

La première consiste à mettre une image en arrière plan du bouton et mettre la taille du texte à zéro.

1. #monBoutonEnvoi{
2. font-size: 0;
3. width: 135px;
4. height: 60px;
5. background-image: url(image);
6. }

La deuxième consiste à utiliser le Javascript.

1. document.getElementById("monBoutonEnvoi").value="Nouveau texte";