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"]
), je dois utiliser quelque chose qui peut remplacer le texte.
Je dois utiliser [
]
pour que cela fonctionne.
<div class="pvw-title">Facts</div>
J'ai besoin de remplacer "Facts".
Ou peut-être pourriez-vous encapsuler les «faits» autour d'un <span>
comme suit:
<div class="pvw-title"><span>Facts</span></div>
Alors utilisez:
.pvw-title span {
display: none;
}
.pvw-title:after {
content: 'whatever it is you want to add';
}
Obligatoire: Ceci 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 dans un iframe qui ne peut être personnalisée que par CSS - ce genre de hack est la seule option.
Vous pouvez remplacer le texte via CSS. Remplaçons un bouton vert par 'hello' par un bouton rouge qui dit 'au revoir', en utilisant CSS. 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 ensuite un autre élément de bloc:
button {
visibility: hidden;
}
button:after {
content:'goodbye';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}
Remarque:
visibility
. La note display: none
sur 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. Cela ne suppose pas de connaître 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 */
}
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;
}
un élément qui est positionné absolument est retiré du flux et donc ne prend pas de place lors du placement d'autres éléments.
Simple, court, efficace. Aucun html supplémentaire 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 */
}
Je devais le faire pour remplacer le texte du lien, autre que chez moi, pour la chapelure
SASS/MOINS
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 pouvez.
.pvw-title:after {
content: "Test";
}
Cela insérera le contenu après le contenu actuel de l'élément. Cela ne le remplace pas réellement, mais vous pouvez choisir un div vide et utiliser CSS pour ajouter tout le contenu.
Mais si vous le pouvez plus ou moins, vous ne devriez pas. Le contenu réel devrait être mis dans le document. La propriété content est principalement destinée aux petits balises, comme les guillemets autour du texte devant apparaître entre guillemets.
Essayez d'utiliser: before et: after. L'un insère du texte après le rendu de HTML, l'autre l'insère avant que HTML soit rendu. 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: avant
grand screenxxx
grand écran
2) avec: après
écran xxxbig
grand écran
_ {Cela ne répond peut-être pas parfaitement à la question, mais cela répondait à mes besoins et peut-être à d'autres aussi.
Donc, si vous voulez seulement montrer différents textes ou images, gardez 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)}
Vous avez maintenant un tas de façons différentes de basculer entre eux. Je les ai utilisés en combinaison avec des requêtes de médias pour une approche de conception réactive permettant de changer les noms de ma navigation en icônes.
Cela a fonctionné pour moi avec le texte en ligne. 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 cette astuce:
.pvw-title {
text-indent: -999px;
}
.pvw-title:after {
text-indent: 0px;
float: left;
content: 'My New Content';
}
J'ai même utilisé cela 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!';
}
J'ai eu plus de chance en réglant le font-size: 0
de l'élément extérieur et le font-size
du sélecteur :after
à tout ce dont j'avais besoin.
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 de connaissance de l'élément d'origine ni de 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 en tant que bouton indiquant Oui ou Non en fonction de son état "coché". Donc, il montre une façon de remplacer du texte en utilisant CSS sans avoir à écrire de code.
Il se comportera toujours comme une case à cocher pour renvoyer (ou ne pas renvoyer) une valeur POST, mais du point de vue de l'affichage, il ressemble à un bouton bascule.
Les couleurs ne vous conviennent peut-être pas, 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 du CSS standard, donc ça devrait marcher ailleurs.
Un problème me obligeait à remplacer le texte du lien, mais je ne pouvais pas utiliser javascript ni modifier 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 portée et j'ai placé la balise d'ancrage en dessous et enveloppé les deux dans une div. En gros, j'ai déplacé la balise d'ancrage via css, puis j'ai rendu la police transparente. Maintenant, lorsque vous survolez la plage, il "agit" comme un lien. Une façon très astucieuse de faire cela, mais c'est comme ça que vous pouvez avoir un lien avec un texte différent ...
Ceci est un violon de la façon dont j'ai contourné 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.
Edit: Quelqu'un peut-il me dire pourquoi cela a été voté? Ma solution fonctionne ...
Contrairement à ce que je vois dans toutes les autres réponses, vous n'avez pas besoin d'utiliser des pseudo-éléments pour remplacer le contenu d'une balise par une image
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 genre de chose se fait généralement avec Javascript. Voici comment faire avec jQuery:
$('.pvw-title').text('new text');
la façon de faire ce travail est d'ajouter line-height au css. cela fera apparaître le bloc au-dessus de ce qui est caché, ainsi le texte modifié ne sera pas caché.
exemple avec use before :
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'whatever it is you want to add';
line-height: 1.5em
}