Changer le texte d’un élément HTML avec le CSS

Il est parfois nécessaire de modifier du contenu texte sans vouloir revenir sur le code source (comme un contenu HTML généré par PHP). C’est souvent le cas lorqu’on souhaite traduire un contenu fourni par un plugin WordPress.

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 : 

<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.

.content {
  text-indent: -9999px;
  line-height: 0;
}

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.

.content::after {
  content: "Bonjour Monde!";
  text-indent: 0;
  display: block;
  line-height: initial;
}

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

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. 

.content {
  font-size: 0;
}

.content::before {
  content: "Bonjour Monde!";
  font-size: initial;
}

Testez vous-même le code sur Codepen

See the Pen BEGMar by salsacobo (@salsacobo) on 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.

#monBoutonEnvoi{
 font-size: 0;
 width: 135px;
 height: 60px;
 background-image: url(image); 
}

La deuxième consiste à utiliser le Javascript.

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