Comment puis-je remplacer le texte par CSS?

ou peut-être pourriez-vous envelopper "Facts" autour d'un <span> comme suit:

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

ensuite utiliser:

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

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

vous pouvez remplacer le texte par CSS. remplaçons un bouton vert par" Bonjour "par un bouton rouge qui dit" au revoir " , en utilisant CSS. Voir http://jsfiddle.net/ZBj2m/274 / pour une démo 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;
}

Note:

• nous devons explicitement marquer cette valeur comme un élément de bloc, 'after' elements are span by default
• nous devons compenser l'élément original en ajustant la position du pseudo-élément.
• nous devons Cacher l'élément original et afficher le pseudo-élément en utilisant visibility . Note display: none sur l'élément original ne fonctionne pas.

si vous êtes prêt à utiliser des pseudo-éléments et les laisser insérer du contenu, Vous pouvez faire ce qui suit. Il ne suppose la connaissance de l'élément d'origine et ne nécessite pas de supplément additionnel.

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

JSFiddle Exemple

basé sur 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 en position absolue de l'écoulement et donc prend pas de place lors de l'insertion d'autres éléments.

Simple, Court, 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 lien texte, autre que la maison, pour woocommerce breadcrumbs

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, vous pouvez.

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

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

mais alors que vous pouvez plus ou moins, vous ne devriez pas. Le contenu réel doit être mis dans le document. La propriété content est principalement destinée à un petit markup, comme les guillemets autour du texte qui doit apparaître cité.

essayez d'utiliser: avant et: après. Un insert texte après HTML est rendu, les autres insert avant HTML est rendu. Si vous voulez remplacer le texte, Laissez le bouton contenu 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: avant

big screenxxx

grand écran

2) avec: après

écran xxxbig

grand écran

cela a fonctionné pour moi avec inline text. Testé en FF, 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 ce truc:

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

j'ai même utilisé ceci 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!';
}

il se peut qu'il ne réponde pas parfaitement à la question, mais il a satisfait mes besoins et peut-être d'autres aussi.

donc si vous voulez juste Afficher des textes ou des images différents, gardez la balise vide et écrivez votre contenu dans les attributs de données multiples comme cela <span data-text1="Hello" data-text2="Bye"></span> . Les afficher avec l'une des pseudo classes :before {content: attr(data-text1)}

Maintenant vous avez un tas de différentes façons de passer entre eux. Je les ai utilisés dans combinaison avec des requêtes Médias pour une approche de conception réactive pour changer les noms de ma navigation aux icônes.

jsfiddle de démonstration et exemples

j'ai eu plus de chance de régler le font-size: 0 de l'élément extérieur, et le font-size du sélecteur :after à tout ce dont j'avais besoin.

en utilisant un pseudo-élément, cette méthode ne nécessite pas de connaissance de l'élément original et ne nécessite pas de marge 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;
}

cette option implémente une case à cocher comme un bouton qui affiche oui ou non selon son état "coché". Ainsi, il démontre une façon de remplacer le texte en utilisant 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 de poteau, mais d'un point de vue d'affichage il ressemble à un bouton à bascule.

les couleurs peuvent ne pas être à votre goût, elles ne sont là que pour illustrer un point.

le HTML est:

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

...et le CSS 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 l'ai seulement essayé sur Firefox, mais c'est css standard donc il devrait fonctionner ailleurs.

ce n'est pas vraiment possible sans astuces. Voici une manière qui fonctionne en remplaçant le texte avec une image de texte.

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

ce type de chose est généralement fait avec Javascript. Voici comment cela peut être fait avec jQuery:

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

j'ai eu un problème où je devais remplacer le texte du lien mais ne pouvais pas utiliser javascript ni modifier directement le texte d'un lien hypertexte comme il a été compilé à partir de XML. Aussi, je ne pouvais pas utiliser de pseudo-éléments, ou ils ne semblaient pas fonctionner quand je les avais essayés.

en gros, j'ai mis le texte que je voulais dans une portée et mis l'étiquette d'ancrage en dessous et enveloppé les deux dans un div. J'ai essentiellement déplacé l'étiquette d'ancrage vers le haut via css et ensuite fait la police transparente. Maintenant, quand tu survoles la portée, ça "agit" comme un lien. Une façon vraiment hacky de faire cela, mais c'est comment vous pouvez avoir un lien avec le texte différent...

C'est un violon de comment je suis arrivé à contourner ce numéro

My 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>

My CSS

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

Le CSS devra changer selon vos besoins, mais c'est d'une manière générale de faire ce que vous demandez.

Edit: Quelqu'un peut-il me dire pourquoi cela a été rejeté? Ma solution fonctionne...

contrairement à ce que je vois dans toutes les autres réponses, vous n'ont pas besoin d'utiliser des pseudo-éléments afin de remplacer le contenu d'un équilibre avec une image

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

Texte de Remplacement avec des Pseudo-éléments et CSS Visibilité

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