Comment puis-je remplacer du texte par CSS?

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

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';
}

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:

Après:

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.

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

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.

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;
}

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.

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

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

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.

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;
}

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!';
}

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.";
}

À 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;
}

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.

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");
    }

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');

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.

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>

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:

• Sélecteur CSS avancé - Sélectionnez en fonction du style

• Sélecteur CSS par attribut de style en ligne

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
}

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.