Comment puis-je remplacer du texte par CSS?


321

Comment puis-je remplacer du texte par CSS en utilisant une méthode comme celle-ci:

.pvw-title img[src*="IKON.img"] { visibility:hidden; }

Au lieu de ( img[src*="IKON.img"] ), j'ai besoin d'utiliser quelque chose qui peut remplacer le texte à la place.

Je dois utiliser [ ]pour le faire fonctionner.

<div class="pvw-title">Facts</div>

Je dois remplacer " Faits ".


Pour être honnête, il serait préférable d'utiliser javascript pour cela.
Sir

L'utilisation de Javascript nécessite le chargement du DOM, il y a donc un FOUC. Je veux faire cela pour remplacer le texte par du contenu extrait de la chaîne de requête tout en évitant un FOUC sans avoir à générer le côté serveur HTML (permettant ainsi au HTML d'être agressivement mis en cache et servi à partir d'un CDN).
nemequ

32
La question est de savoir comment le faire avec CSS. Je suis utilise un CMS qui ne me permet de changer le CSS, ce qui est la raison pour laquelle je suis arrivé à cette page tout googler pour la réponse, et non un autre. C'est pourquoi nous répondons à la question qui a été posée au lieu de demander pourquoi la situation du demandeur n'est pas différente.
felwithe

Réponses:


291

Ou peut-être pourriez-vous boucler les `` faits '' <span>comme suit:

<div class="pvw-title"><span>Facts</span></div>

Utilisez ensuite:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}

52
Bien, mais c'est un changement en HTML plutôt qu'en CSS.
mikemaccana

22
Parfois, c'est votre seule option
locrizak

4
span {display: aucun; } devrait également masquer le pseudo-élément. Vous devriez utiliser la visibilité: caché à la place
xryl669

2
affichage: aucun; et visibilité: cachée; les deux cachent le pseudo-élément
Facundo Colombier

10
@Mathew cache la plage mais ajoute le pseudo-élément à la div, donc le pseudo-élément ne doit pas être caché (soit en utilisant la visibilité ou la propriété d'affichage)
dewtea

249

Obligatoire : Il s'agit d'un hack: CSS n'est pas le bon endroit pour le faire, mais dans certaines situations - par exemple, vous avez une bibliothèque tierce dans une iframe qui ne peut être personnalisée que par CSS - ce type de hack est la seule option .

Vous pouvez remplacer du texte via CSS. Remplaçons un bouton vert par «bonjour» par un bouton rouge qui dit «au revoir» , en utilisant CSS.

Avant:

entrez la description de l'image ici

Après:

entrez la description de l'image ici

Voir http://jsfiddle.net/ZBj2m/274/ pour une démonstration en direct:

Voici notre bouton vert:

<button>Hello</button>

button {
  background-color: green;
  color: black;
  padding: 5px;
}

Cachons maintenant l'élément d'origine, mais ajoutons un autre élément de bloc par la suite:

button {
  visibility: hidden;
}
button:after {
  content:'goodbye'; 
  visibility: visible;
  display: block;
  position: absolute;
  background-color: red;
  padding: 5px;
  top: 2px;
}

Remarque:

  • Nous devons explicitement le marquer comme un élément de bloc, les éléments 'après' sont en ligne par défaut
  • Nous devons compenser l'élément d'origine en ajustant la position du pseudo-élément.
  • Nous devons masquer l'élément d'origine et afficher le pseudo-élément à l'aide de visibility. Remarque display: nonesur l'élément d'origine ne fonctionne pas.

2
Cela ne fonctionne pas dans ie 10, une idée comment le modifier pour le faire?
Solmead

49
display: none;ne fonctionne pas parce que ::aftersignifie vraiment "à l'intérieur de cet élément, mais à la fin", au cas où quelqu'un serait curieux.
Ry-

4
Malheureusement, le bouton "modifié" ne fonctionne plus comme un bouton. C'est un bon exemple, juste qu'il ne s'applique pas à un bouton.
xryl669

1
affichage: aucun; et visibilité: cachée; les deux cachent le pseudo-élément
Facundo Colombier

Comment se fait-il que lorsque je fais cela, il remplace l'élément mais le texte est tout en majuscules et ne peut pas être changé en minuscules?
Jpaji Rajnish

159

Si vous souhaitez utiliser des pseudo-éléments et les laisser insérer du contenu, vous pouvez procéder comme suit. Il ne suppose pas la connaissance de l'élément d'origine et ne nécessite pas de balisage supplémentaire.

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

Exemple JSFiddle


1
Cette réponse fonctionne dans des endroits où un certain nombre d'autres réponses ne sont pas comme les nœuds de texte à l'intérieur d'un <th>élément.
Chris Kerekes

5
Cela fonctionne bien. Dans mon cas, line-height: 0et color: transparentsur l'élément principal et la réinitialisation de ces valeurs sur le pseudo fait le travail (pas de tripotage text-indent)
dontGoPlastic

1
Devrait - il pas au line-height: normallieu de initial?
Benjamin

1
la raison d'utiliser le retrait de texte est que si le texte d'origine est plus long, l'élément reste à la taille de l'ancien texte, sans se réduire à la taille du nouveau texte (en supposant que c'est ce que vous voulez)
Chris Janssen

Le retrait de texte: -9999px; fonctionne sur IE. Attendu que la visibilité: cachée; ne fonctionne pas sur IE.
Tom Stermitz

57

Sur la base de la réponse de Mikemaccana , cela a fonctionné pour moi

button {
  position: absolute;
  visibility: hidden;
}

button:before {
  content: "goodbye";
  visibility: visible;
}

§ Positionnement absolu

un élément qui est positionné de façon absolue est retiré du flux et ne prend donc pas de place lors du placement d'autres éléments.


2
Pour moi, cette réponse était supérieure aux autres car elle fonctionne avec un remplacement de texte dans la même ligne, c'est-à-dire qu'elle ne force pas un saut de ligne dans le texte (pour ma combinaison particulière de HTML et CSS).
pgr

30

C'est simple, court et efficace. Aucun HTML supplémentaire n'est nécessaire.

.pvw-title { color: transparent; }

.pvw-title:after {
        content: "New Text To Replace Old";
        color: black; /* set color to original text color */
        margin-left: -30px;
        /* margin-left equals length of text we're replacing */
    }

J'ai dû le faire pour remplacer le texte du lien, autre que la maison, pour le fil d' Ariane WooCommerce

Sass / Less

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
    &:after {
        content: "Store";
        color: grey;
        margin-left: -30px;
    }
}

CSS

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"] {
    color: transparent;
}

body.woocommerce .woocommerce-breadcrumb > a[href$="/shop/"]&:after {
    content: "Store";
    color: @child-color-grey;
    margin-left: -30px;
}

22

Vous ne pouvez pas, eh bien, vous le pouvez.

.pvw-title:after {
  content: "Test";
}

Cela insérera du contenu après le contenu actuel de l'élément. Il ne le remplace pas réellement, mais vous pouvez choisir un div vide et utiliser CSS pour ajouter tout le contenu.

Mais alors que vous le pouvez plus ou moins, vous ne devriez pas. Le contenu réel doit être mis dans le document. La propriété de contenu est principalement destinée aux petits marquages, comme les guillemets autour du texte devant apparaître entre guillemets.


Je suis très sûr à ce sujet que j'ai utilisé un code pour remplacer le texte par une sorte de cette méthode .. '<div class = "pvw-title"> Facts </div> <div class = "pvw-title"> Facts </ div> 'Je ne peux pas utiliser: après, parce que j'ai eu plus d'une classe div avec le même nom :(
MokiTa

Quelle est la compatibilité avec les navigateurs? Et je pense que javascript va être un meilleur choix à long terme pour ce type de flexibilité.
Sir

Les navigateurs modernes le supportent. Je ne suis pas sûr des anciennes versions d'IE, mais je suppose que cela peut être consulté sur quirksmode.com. -edit- Il peut: quirksmode.org/css/user-interface/content.html
GolezTrol

15

Essayez d'utiliser :beforeet:after . L'une insère du texte après le rendu HTML et l'autre insère avant le rendu HTML. Si vous souhaitez remplacer du texte, laissez le contenu du bouton vide.

Cet exemple définit le texte du bouton en fonction de la taille de la largeur de l'écran.

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  button:before {
    content: 'small screen';
  }
  @media screen and (min-width: 480px) {
    button:before {
      content: 'big screen';
    }
  }
</style>
<body>
  <button type="button">xxx</button>
  <button type="button"></button>
</body>

Texte du bouton:

  1. Avec :before

    grand écranxxx

    grand écran

  2. Avec :after

    écran xxxbig

    grand écran


11

Si vous souhaitez simplement afficher différents textes ou images, laissez la balise vide et écrivez votre contenu dans plusieurs attributs de données comme celui-ci <span data-text1="Hello" data-text2="Bye"></span>. Affichez-les avec l'une des pseudo-classes:before {content: attr(data-text1)}

Maintenant, vous avez plusieurs façons de basculer entre eux. Je les ai utilisés en combinaison avec des requêtes multimédias pour une approche de conception réactive pour changer les noms de ma navigation en icônes.

démonstration et exemples de jsfiddle

Elle ne répond peut-être pas parfaitement à la question, mais elle satisfait mes besoins et peut-être d'autres aussi.


10

J'ai eu plus de chance de régler l' font-size: 0élément extérieur et font-sizele :aftersélecteur sur ce dont j'avais besoin.


1
Cela fonctionne bien. Voici une démo .
Arthur

9

Cela a fonctionné pour moi avec le texte en ligne. Il a été testé dans Firefox, Safari, Chrome et Opera.

<p>Lorem ipsum dolor sit amet, consectetur <span>Some Text</span> adipiscing elit.</p>

span {
    visibility: hidden;
    word-spacing: -999px;
    letter-spacing: -999px;
}

span:after {
    content: "goodbye";
    visibility: visible;
    word-spacing: normal;
    letter-spacing: normal;
}

2
Ne fonctionne pas pour moi dans au moins IE 9 à 11 car il ignore la "visibilité: visible" sur l'élément: after: stackoverflow.com/questions/17530947/…
thenickdude

8

J'utilise cette astuce:

.pvw-title {
    text-indent: -999px;
}
.pvw-title:after {
    text-indent: 0px;
    float: left;
    content: 'My New Content';
}

Je l'ai même utilisé pour gérer l'internationalisation des pages en changeant simplement une classe de base ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

3
Cela est problématique pour les utilisateurs de lecteurs d'écran. Si vous ne modifiez pas la visibilité / la visibilité de l'élément et ne fournissez pas d'indices aria, votre texte "invisible" peut toujours être lu par un lecteur d'écran.
Compilateur remarquable

8

Remplacement de texte avec pseudo-éléments et visibilité CSS

HTML

<p class="replaced">Original Text</p>

CSS

.replaced {
    visibility: hidden;
    position: relative;
}

.replaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

3

À l'aide d'un pseudo-élément, cette méthode ne nécessite pas la connaissance de l'élément d'origine et ne nécessite aucun balisage supplémentaire.

#someElement{
    color: transparent; /* You may need to change this color */
    position: relative;
}
#someElement:after { /* Or use :before if that tickles your fancy */
    content: "New text";
    color: initial;
    position: absolute;
    top: 0;
    left: 0;
}

2

Cela implémente une case à cocher sous forme de bouton qui affiche Oui ou Non en fonction de son état «vérifié». Il montre donc une façon de remplacer du texte à l'aide de CSS sans avoir à écrire de code.

Il se comportera toujours comme une case à cocher en ce qui concerne le retour (ou le non retour) d'une valeur POST, mais d'un point de vue d'affichage, il ressemble à un bouton bascule.

Les couleurs peuvent ne pas vous plaire, elles ne sont là que pour illustrer un point.

Le HTML c'est:

<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>

... et le CSS c'est:

/* --------------------------------- */
/* Make the checkbox non-displayable */
/* --------------------------------- */
input[type="checkbox"].yesno {
    display:none;
}
/* --------------------------------- */
/* Set the associated label <span>   */
/* the way you want it to look.      */
/* --------------------------------- */
input[type="checkbox"].yesno+label span {
    display:inline-block;
    width:80px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    color:#800000;
    background-color:white;
    border-style:solid;
    border-width:1px;
    border-color:black;
    cursor:pointer;
}
/* --------------------------------- */
/* By default the content after the  */
/* the label <span> is "No"          */
/* --------------------------------- */
input[type="checkbox"].yesno+label span:after {
    content:"No";
}
/* --------------------------------- */
/* When the box is checked the       */
/* content after the label <span>    */
/* is "Yes" (which replaces any      */
/* existing content).                */
/* When the box becomes unchecked the*/
/* content reverts to the way it was.*/
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span:after {
    content:"Yes";
}
/* --------------------------------- */
/* When the box is checked the       */
/* label <span> looks like this      */
/* (which replaces any existing)     */
/* When the box becomes unchecked the*/
/* layout reverts to the way it was. */
/* --------------------------------- */
input[type="checkbox"].yesno:checked+label span {
    color:green;
    background-color:#C8C8C8;
}

Je ne l'ai essayé que sur Firefox, mais c'est du CSS standard donc ça devrait fonctionner ailleurs.


2

Contrairement à ce que je vois dans toutes les autres réponses, vous n'avez pas besoin d'utiliser de pseudo-éléments pour remplacer le contenu d'une balise par une image

<div class="pvw-title">Facts</div>

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }

2
À partir de CSS2, contents'applique uniquement à :beforeet :after. CSS3 l'étend à tout, mais le module de contenu généré est toujours à l'état de brouillon, donc toute utilisation est très susceptible d'être dépendante du navigateur.
mrec

1
Qu'est-ce qu'une "balise" ? Pas " 1. (European Train Control System) Une balise électronique ou un transpondeur placé entre les rails d'un railw " , je présume. (Veuillez répondre en modifiant votre question , pas ici dans les commentaires).)
Peter Mortensen

1

Ce n'est pas vraiment possible sans astuces. Voici une méthode qui fonctionne en remplaçant le texte par une image de texte.

.pvw-title{
    text-indent: -9999px;
    background-image: url(text_image.png)
}

Ce type de chose se fait généralement avec JavaScript. Voici comment cela peut être fait avec jQuery:

$('.pvw-title').text('new text');

3
Je ne peux pas utiliser Javascript non plus: /
MokiTa

1
C'est la seule façon dont je pense que cela pourrait fonctionner: .pvw-title span [style * = "color: # 000, font-size: 14px;"] {visibilité: caché; } .pvw-title span [style * = "color: # 000; font-size: 14px;"]: après {visibilité: visible; couleur: # 000; taille de police: 14px; contenu: "Test"; } mais, comme ils utilisent tous les deux le même style, je ne peux pas le faire ..: /
MokiTa

pourquoi le sélectionneriez-vous en fonction de la couleur / police?
Nathan Manousos

Je voudrais que vous le sélectionniez en fonction du style entier, donc je peux éditer ce titre spécifique et pas les deux, car les deux ont le même nom "div".
MokiTa

1

J'ai eu un problème où j'ai dû remplacer le texte du lien, mais je ne pouvais pas utiliser JavaScript ni changer directement le texte d'un lien hypertexte car il était compilé à partir de XML. De plus, je ne pouvais pas utiliser de pseudo-éléments, ou ils ne semblaient pas fonctionner quand je les avais essayés.

Fondamentalement, j'ai mis le texte que je voulais dans une étendue et j'ai mis la balise d'ancrage en dessous et enveloppé les deux dans un div. J'ai essentiellement déplacé la balise d'ancrage via CSS, puis rendu la police transparente. Maintenant, lorsque vous survolez la plage, il "agit" comme un lien. Une façon vraiment hacky de le faire, mais c'est ainsi que vous pouvez avoir un lien avec un texte différent ...

Ceci est un violon de la façon dont j'ai pu contourner ce problème

Mon HTML

<div class="field">
    <span>This is your link text</span><br/>
    <a href="//www.google.com" target="_blank">This is your actual link</a>
</div>

Mon CSS

 div.field a {
     color: transparent;
     position: absolute;
     top:1%;
 }
 div.field span {
     display: inline-block;
 }

Le CSS devra changer en fonction de vos besoins, mais c'est une façon générale de faire ce que vous demandez.


1
@AlmightWhy Je soupçonne que cela a été rétrogradé parce que cette solution nécessite de modifier le balisage et je soupçonne que si l'OP pourrait modifier le balisage, il / elle changerait simplement le texte directement. En d'autres termes, l'OP nécessitait une solution CSS uniquement
dannie.f

1

J'ai trouvé une solution comme celle-ci où un mot, "Dark", serait raccourci en "D" sur une plus petite largeur d'écran. Fondamentalement, vous ne faites que la taille de la police du contenu d'origine 0 et avez la forme raccourcie en tant que pseudo-élément.

Dans cet exemple, le changement se produit au survol:

span {
  font-size: 12px;
}

span:after {
  display: none;
  font-size: 12px;
  content: 'D';
  color: red;
}

span:hover {
  font-size: 0px;
}

span:hover:after {
  display: inline;
}
<span>Dark</span>


1

Après huit ans, j'ai été confronté au même défi en essayant d'utiliser l' extension de navigateur Stylish pour changer quelque chose sur un site Web (pas le mien). Et cette fois, je l'ai fait fonctionner en regardant le code source en utilisant "inspecter l'élément" et j'ai créé le code CSS basé sur cela.

Voici à quoi il ressemblait avant:

<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

C'est le même morceau du HTML et du CSS que j'ai utilisé pour modifier le style:

td span[style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;"] {
  width: 100px!important;
}
<table>
  <tbody>
    <tr>
      <td role="gridcell">
        <span title="In progress" style="background-color: #e2047a;color:White;margin:2px;border-radius:2px;padding-left: 2px; padding-right: 2px;text-align: center;width: 45px; display: block;overflow: hidden;text-overflow: ellipsis;">In progress</span>
      </td>
    </tr>
  </tbody>
</table>

Vous pouvez exécuter le code ci-dessus et vous verrez qu'il fonctionne (testé dans Chrome).


C'est tout simplement ce que je voulais à l'époque où je posais cette question.

J'utilisais une sorte de blog communautaire / des choses similaires sur Myspace et la seule chose que vous aviez lors de la création de votre profil était leur éditeur CSS, et c'est pourquoi je voulais le sélectionner en fonction du style.

J'ai trouvé la réponse ici:


0

La façon de faire fonctionner cela consiste à ajouter une hauteur de ligne au contenu CSS. Cela rendra le bloc visible au-dessus du caché, donc cela ne masquera pas le texte modifié.

Exemple d'utilisation avant :

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}

0

Eh bien, comme beaucoup l'ont dit, c'est un hack. Cependant, je voudrais ajouter un hack plus à jour, qui tire parti de flexboxet rem, c.-à-d.

  • Vous ne souhaitez pas positionner manuellement ce texte à modifier, c'est pourquoi vous souhaitez profiter de flexbox
  • Vous ne voulez pas utiliser paddinget / ou marginle texte en utilisant explicitement px, ce qui pour différentes tailles d'écran sur différents appareils et navigateurs peut donner des résultats différents

Voici la solution, en bref flexboxs'assure qu'il est automatiquement parfaitement positionné et remest une alternative plus standardisée (et automatisée) pour les pixels.

CodeSandbox avec code ci-dessous et sortie sous forme de capture d'écran, veuillez lire noteci-dessous le code!

h1 {
  background-color: green;
  color: black;
  text-align: center;
  visibility: hidden;
}
h1:after {
  background-color: silver;
  color: yellow;
  content: "This is my great text AFTER";
  display: flex;
  justify-content: center;
  margin-top: -2.3rem;
  visibility: visible;
}
h1:before {
  color: blue;
  content: "However, this is a longer text to show this example BEFORE";
  display: flex;
  justify-content: center;
  margin-bottom: -2.3rem;
  visibility: visible;
}

Remarque: pour différentes balises dont vous pourriez avoir besoin de valeurs différentes rem, celle-ci a été justifiée pour h1et uniquement sur de grands écrans. Cependant, @mediavous pouvez facilement l'étendre aux appareils mobiles.

Un hack pour remplacer du texte HTML en utilisant CSS

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.