Modifier le contenu en CSS

1. Utilisez le pseudo-élément :after et la propriété display pour remplacer le texte en CSS
2. Utilisez le pseudo-élément :before et la propriété visibility pour remplacer le texte en CSS

Le didacticiel présentera quelques façons de modifier ou de remplacer le contenu en CSS.

Utilisez le pseudo-élément :after et la propriété display pour remplacer le texte en CSS

Nous pouvons utiliser les pseudo-éléments en CSS pour modifier ou remplacer le contenu écrit en HTML. Utilisez ensuite le pseudo-élément :after et la propriété content pour atteindre notre objectif.

Utilisez le sélecteur :after pour ajouter du contenu après le contenu sélectionné. Pour ajouter le contenu, nous utilisons la propriété content.

On peut écrire le contenu souhaité comme valeur de la propriété content. Pour remplacer ou modifier le contenu, nous pouvons masquer le contenu précédemment écrit et utiliser la propriété content, en sélectionnant l’élément avec le sélecteur :after.

Cette méthode définit la propriété display sur none pour masquer le texte précédent.

Par exemple, créez un div avec la classe text. A l’intérieur de la div, écrivez une balise span et the original text à l’intérieur de la span.

En CSS, sélectionnez le span et définissez sa propriété display sur none. Ensuite, utilisez le sélecteur :after pour sélectionner la classe text.

Enfin, écrivez la propriété content et définissez sa valeur sur the changed text dans le corps.

Lorsque l’extrait de code de l’exemple ci-dessous est exécuté, the changed text s’affiche. Ici, le texte the original text est supprimé du document, et il fait comme si l’élément n’existait pas.

C’est parce que la valeur de la propriété content occupera son espace. En conséquence, le nouveau contenu sera affiché.

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

Utilisez le pseudo-élément :before et la propriété visibility pour remplacer le texte en CSS

On peut modifier le contenu écrit en HTML en utilisant le pseudo-élément :before en CSS. Le pseudo-élément :before fonctionne de manière similaire au pseudo-élément :after, mais le contenu est présenté ici.

Utilisez-le pour écrire le contenu avant l’élément sélectionné. Cette méthode utilise la propriété content comme dans la première méthode.

De plus, nous pouvons utiliser la propriété visibility pour masquer le contenu précédent et le définir sur hidden.

Lorsqu’elle est définie sur hidden, la propriété visibility rendra le contenu invisible, mais l’espace vide sera affiché dans le document. Mais, l’utilisation du sélecteur :before remplacera l’espace par le nouveau contenu.

Par exemple, sélectionnez l’élément span et définissez sa propriété visibility sur hidden dans l’exemple utilisé dans la première méthode.

Mais n’oubliez pas de supprimer les styles précédemment appliqués. Sélectionnez ensuite la classe text avec le sélecteur :before et écrivez le nouveau contenu comme dans l’exemple ci-dessous.

Utilisez display:none pour masquer le contenu précédent. Cependant, nous ne pouvons pas utiliser visibility:hidden tout en utilisant le sélecteur :after car l’espace de l’élément masqué sera conservé.

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}