Comment remplacer le texte par CSS?

Comment remplacer le texte par CSS?
Le remplacement d'un texte se fait principalement dans les langages de programmation côté serveur, y compris PHP. Cependant, les développeurs travaillent occasionnellement sous certaines limites et ne peuvent pas remplacer le texte sur le serveur. Dans de tels scénarios, remplacer le texte à l'aide de CSS est un bon choix. Si l'utilisateur souhaite remplacer le texte, CSS "contenu»La propriété peut être utilisée. De plus, vous pouvez également styliser le texte remplacé à l'aide de CSS.

Ce tutoriel examinera:

  • Comment ajouter du texte en HTML?
  • Comment remplacer le texte par CSS?

Comment ajouter du texte en HTML?

Dans HTML, le texte peut être ajouté de différentes manières, comme un élément de cap "

"Est utilisé pour ajouter du texte de cap, ou le"

Parcourez les instructions fournies pour ajouter le texte au document HTML.

Étape 1: Créez un conteneur «div»

Faites un élément «div» avec l'aide du «" étiqueter. De plus, insérer un «identifiant”Attribut pour allouer un nom spécifique à un élément.

Étape 2: Ajouter du texte

Ensuite, utilisez la balise de paragraphe "

»Et attribuez-lui un«classe" attribut. Ensuite, intégrez du texte entre les balises de paragraphe:


LinuxHint est l'un des meilleurs sites Web de tutoriel. (Vieux texte)


On peut observer que le texte a été ajouté avec succès:

Étape 3: Élément de style «div»

Maintenant, utilisez le «identifiant"Selecteur et ID"# Main-DIV«Pour accéder à l'élément« div ». Ensuite, appliquez les propriétés énoncées ci-dessous:

# main-div
Border: 3px noir solide;
Color en arrière-plan: RVB (179, 233, 250);
marge: 50px;
Style de police: italique;

Ici:

  • "frontière«La propriété est utilisée pour définir une frontière autour de l'élément.
  • "Couleur de l'arrière plan»La propriété alloue une couleur à l'arrière de l'élément.
  • "marge»Spécifie un espace autour de la limite de l'élément.
  • "le style de police»Détermine le style spécifique pour un texte comme«italique»:

Comment remplacer le texte par CSS?

Pour remplacer le texte par CSS, cachez d'abord le texte précédent en utilisant le «visibilité" propriété. Ensuite, intégrez le texte en utilisant le «contenu" propriété.

Pour remplacer le texte dans CSS, essayez la procédure donnée.

Étape 1: Cachez l'ancien texte

Tout d'abord, accédez à l'élément où vous avez intégré le texte. Dans notre scénario, nous accéderons au «

"Élément par le nom de classe".texter de remplacement". Ensuite, appliquez le «position" et "visibilité" propriétés:

.remplacer-text
Position: relative;
Visibilité: cachée;

Ici le "position»Spécifie que l'élément sera positionné par rapport à sa position normale sur la page Web, et le« «visibilité»La propriété est utilisée pour masquer l'élément.

Sortir

Étape 2: Remplacer le texte

Accéder au texte du «

"Tag par classe".texter de remplacement". Utilisez également la pseudo-classe ":après”Qui inséra le texte après le contenu de l'élément sélectionné:

.Remplace-Text: After
Contenu: "Linuxhint est une organisation britannique. (Nouveau texte) ";
Position: absolue;
Visibilité: visible;
à gauche: 0;
en haut: 0;

La description des propriétés susmentionnées est la suivante:

  • "contenu»La propriété est utilisée pour ajouter le contenu dans l'élément sélectionné.
  • "gauche"Dans CSS est utilisé pour allouer la position horizontale d'un élément positionné.
  • "haut»Spécifie la position en haut d'un élément.
  • "visibilité"Est défini comme"visible"Pour montrer le contenu à l'intérieur du div.

Sortir

On peut remarquer que le texte est remplacé avec succès en utilisant CSS.

Conclusion

Pour remplacer le texte par CSS, ajoutez d'abord le texte en utilisant le «

" étiqueter. Ensuite, accédez au «

«Élément dans CSS en utilisant la classe attribuée et appliquez le«visibilité«Propriété avec la valeur»caché«Pour cacher le vieux texte. Après cela, utilisez la pseudo-classe ":après"Avec la classe assignée du"

" élément. Remplacez le texte à l'aide du «contenu”Propriété, et à nouveau réglé le"visibilité«Propriété comme«visible". Ce message a expliqué la méthode de remplacement du texte de HTML à l'aide de CSS.