Cet article vous guidera sur la modification du contenu en CSS.
Comment changer le contenu en CSS ?
Pour modifier le contenu en CSS, nous utiliserons les méthodes ci-dessous :
Passons en revue chaque méthode une par une !
Méthode 1 : Utilisez ::after Selector avec la propriété content pour modifier le contenu en CSS
La ' ::après ' le sélecteur place le contenu spécifié après l'élément HTML en utilisant le CSS ' contenu ' propriété. Cette opération permet d'ajouter le contenu à l'élément sélectionné. De plus, le « affichage ” La propriété peut être utilisée pour masquer le contenu existant.
Examinons l'exemple ci-dessous pour comprendre comment modifier le contenu en CSS à l'aide du sélecteur ::after.
Exemple
Voici notre page HTML avec le texte ' Bonjour!!! ”. Remplaçons le contenu ajouté :
Actuellement, nous avons ajouté un ' ' tag avec du texte dans la section body de notre fichier HTML :
< p > Bonjour!!! < / p >Dans notre fichier CSS, nous allons maintenant utiliser le sélecteur ::after comme ' corps :: après ' et utilisez le ' contenu « propriété avec la valeur » Bonsoir ” à l'intérieur de sa définition. En conséquence, le sélecteur CSS placera le texte juste après le texte écrit. Enfin, masquez le texte existant en utilisant le ' affichage ' propriété et définissez sa valeur sur ' rien ” :
< style >corps :: après {
contenu : 'Bonsoir' ;
}
p {
affichage : aucun ;
}
< / style >
Maintenant, enregistrez votre fichier HTML et ouvrez-le simplement sur le navigateur ou utilisez 'Serveur en direct » dans le même but :
Comme vous pouvez le constater, le contenu a été modifié avec succès à l'aide du sélecteur CSS ::after :
Méthode 2 : Utilisez ::before Selector avec la propriété content pour modifier le contenu en CSS
En CSS, le ' ::avant de ” est utilisé pour faire apparaître le contenu juste avant le contenu existant d'un élément. Il peut être utilisé en combinaison avec le ' contenu ” propriété pour ajouter un nouveau contenu à l'élément sélectionné.
Exemple
Spécifiez le sélecteur ::before juste après le corps comme ' corps :: avant ”. Cela placera le nouveau contenu avant le contenu existant. Notez que toutes les autres propriétés restent les mêmes que dans l'exemple précédent :
< style >corps :: avant {
contenu : 'Bonsoir' ;
}
p {
affichage : aucun ;
}
< / style >
Production
Nous avons expliqué différentes méthodes pour modifier le contenu en CSS.
Conclusion
Pour modifier le contenu, ' ::après ' et ' ::avant de ” Les sélecteurs CSS sont utilisés avec le “ contenu ' propriété. Dans la première approche, le texte spécifié est ajouté après l'élément sélectionné, tandis que le deuxième sélecteur CSS fonctionne à l'opposé. De plus, le « affichage ” La propriété peut être utilisée pour masquer le contenu existant d'un élément. C'est ainsi que le contenu est complètement modifié en CSS. Nous avons couvert les deux méthodes de modification du contenu en CSS.