Como posso substituir texto por CSS?

321

Como posso substituir texto por CSS usando um método como este:

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

Ao invés de ( img[src*="IKON.img"] ), preciso usar algo que possa substituir o texto.

Eu tenho que usar [ ]para fazê-lo funcionar.

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

Eu preciso substituir " Fatos ".

MokiTa
fonte
Para ser honesto, talvez seja melhor usar o javascript para isso.
Sir
O uso de Javascript requer que o DOM seja carregado, portanto, existe um FOUC. Eu quero fazer isso para substituir o texto pelo conteúdo extraído da string de consulta, evitando um FOUC sem precisar gerar o lado do servidor HTML (permitindo que o HTML seja armazenado em cache e servido de forma agressiva a partir de uma CDN).
1/16
32
A questão é como fazer isso com CSS. Eu estou usando um CMS que só me permite mudar o CSS, que é por isso que cheguei à essa página enquanto googling para a resposta, e não uma diferente. É por isso que respondemos à pergunta que foi feita, em vez de perguntar por que a situação do solicitante não é diferente.
precisa saber é o seguinte

Respostas:

291

Ou talvez você possa agrupar 'Fatos' em volta da <span>seguinte forma:

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

Então use:

.pvw-title span {
  display: none;
}
.pvw-title:after {
  content: 'whatever it is you want to add';
}
Matthew Cachia
fonte
52
Bom, mas isso é uma alteração no HTML, e não apenas no CSS.
Mikemaccana
22
Às vezes é sua única opção
locrizak
4
extensão {exibição: nenhuma; } também deve ocultar o pseudo elemento. Você deve usar visibility: hidden vez
xryl669
2
Mostrar nenhum; e visibilidade: oculto; tanto esconder o elemento pseudo
Facundo Colombier
10
@Mathew está escondendo a extensão, mas acrescentando o elemento pseudo ao div, de modo que o elemento pseudo não deve ser escondido (ou usando a visibilidade ou a propriedade de exibição)
dewtea
249

Obrigatório : este é um hack: o CSS não é o lugar certo para fazer isso, mas em algumas situações - por exemplo, você tem uma biblioteca de terceiros em um iframe que só pode ser personalizado pelo CSS - esse tipo de hack é a única opção .

Você pode substituir o texto através de CSS. Vamos substituir um botão verde por 'olá' por um botão vermelho que diz 'adeus' , usando CSS.

Antes:

insira a descrição da imagem aqui

Depois de:

insira a descrição da imagem aqui

Veja http://jsfiddle.net/ZBj2m/274/ para uma demonstração ao vivo:

Aqui está o nosso botão verde:

<button>Hello</button>

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

Agora vamos ocultar o elemento original, mas adicione outro elemento de bloco depois:

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

Nota:

  • Nós precisamos explicitamente marcar isso como um elemento de bloco, os elementos 'after' estão alinhados por padrão
  • Precisamos compensar o elemento original ajustando a posição do pseudo-elemento.
  • Devemos ocultar o elemento original e exibir o pseudo elemento usando visibility. Nota display: nonesobre o elemento original não funciona.
mikemaccana
fonte
2
Isso não funciona em ie 10, alguma idéia de como modificá-lo para fazer isso?
Solmead 21/07
49
display: none;não funciona porque ::afterrealmente significa "dentro deste elemento, mas no final", caso alguém tenha curiosidade.
Ry-
4
Infelizmente, o botão "modificado" não funciona mais como um botão. É um bom exemplo, apenas que ele não se aplica a um botão.
precisa saber é o seguinte
1
Mostrar nenhum; e visibilidade: oculto; tanto esconder o elemento pseudo
Facundo Colombier
Por que, quando faço isso, ele substitui o elemento, mas o texto está em maiúsculas e não pode ser alterado para minúsculo?
Jpaji Rajnish
159

Se você estiver disposto a usar pseudo-elementos e permitir que eles insiram conteúdo, faça o seguinte. Ele não assume o conhecimento do elemento original e não requer marcação adicional.

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

Exemplo JSFiddle

James van Dyke
fonte
1
Essa resposta funciona em locais que várias outras respostas não, como nós de texto dentro de um <th>elemento.
precisa saber é o seguinte
5
Isso funciona bem. No meu caso, line-height: 0e color: transparentno elemento principal e redefinir esses valores na pseudo fazer o trabalho (sem mexer text-indent)
dontGoPlastic
1
Não deveria ser em line-height: normalvez de initial?
27414 Benjamin
1
O motivo de usar text-indent é que, se o texto original é mais longo, o elemento continua a ser o tamanho do texto antigo, não encolhendo ao tamanho do novo texto (assumindo que é o que você quer)
Chris Janssen
O recuo do texto: -9999px; trabalha no IE. Considerando que a visibilidade: oculta; O método não funciona no IE.
Tom Stermitz
57

Com base na resposta de mikemaccana , isso funcionou para mim

button {
  position: absolute;
  visibility: hidden;
}

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

§ Posicionamento absoluto

um elemento que está posicionado absolutamente é retirado do fluxo e, portanto, não ocupa espaço ao colocar outros elementos.

Steven Penny
fonte
2
Para mim, essa resposta foi superior a outras porque funciona com uma substituição de texto na mesma linha, ou seja, não força uma quebra de linha no texto (para minha combinação específica de HTML e CSS).
pgr 23/05
30

Isso é simples, curto e eficaz. Nenhum HTML adicional é necessário.

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

Eu tive que fazer isso para substituir o texto do link, que não seja o lar, pelas migalhas de pão do 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;
}
hawkeye126
fonte
22

Você não pode, bem, você pode.

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

Isso inserirá o conteúdo após o conteúdo atual do elemento. Na verdade, não o substitui, mas você pode escolher uma div vazia e usar CSS para adicionar todo o conteúdo.

Mas enquanto você pode mais ou menos, não deveria. O conteúdo real deve ser colocado no documento. A propriedade content destina-se principalmente a pequenas marcações, como aspas ao redor do texto que devem aparecer entre aspas.

GolezTrol
fonte
Tenho certeza de que usei um código para substituir o texto pelo tipo desse método. '<Div class = "pvw-title"> Fatos </div> <div class = "pvw-title"> Fatos </ div>' Eu não posso usar: depois, porque eu tenho mais de uma classe div com o mesmo nome :(
MokiTa
Qual a compatibilidade entre os navegadores? E eu suspeito que o javascript será uma escolha melhor a longo prazo para esse tipo de flexibilidade.
Sir
Navegadores modernos suportam. Não tenho certeza sobre versões mais antigas do IE, mas acho que isso pode ser consultado em quirksmode.com. -edit- Ele pode: quirksmode.org/css/user-interface/content.html
GolezTrol
15

Tente usar :beforee :after. Um insere o texto após a renderização do HTML e o outro insere antes da renderização do HTML. Se você deseja substituir o texto, deixe o conteúdo do botão vazio.

Este exemplo define o texto do botão de acordo com o tamanho da largura da tela.

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

Botão de texto:

  1. Com :before

    big screenxxx

    tela grande

  2. Com :after

    tela xxxbig

    tela grande

amor ao vivo
fonte
11

Se você quiser apenas mostrar textos ou imagens diferentes, mantenha a tag vazia e escreva seu conteúdo em vários atributos de dados como esse <span data-text1="Hello" data-text2="Bye"></span>. Exiba-os com uma das pseudo classes:before {content: attr(data-text1)}

Agora você tem várias maneiras diferentes de alternar entre elas. Eu os usei em combinação com consultas de mídia para uma abordagem de design responsivo para alterar os nomes da minha navegação para ícones.

Demonstração e exemplos do jsfiddle

Pode não responder perfeitamente à pergunta, mas satisfez minhas necessidades e talvez outras também.

Robbendebiene
fonte
10

Tive mais sorte ao definir o font-size: 0elemento externo e font-sizeo :afterseletor para o que eu precisasse.

Jerome
fonte
1
Isso funciona bem. Aqui está uma demonstração .
Arthur
9

Isso funcionou para mim com texto embutido. Foi testado no Firefox, Safari, Chrome e 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;
}
Noel Williams
fonte
2
Não funciona para mim, pelo menos, IE 9 a 11 devido a ignorar a "visibilidade: visível" na: após elemento: stackoverflow.com/questions/17530947/...
thenickdude
8

Eu uso esse truque:

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

Eu até usei isso para lidar com a internacionalização de páginas, apenas alterando uma classe base ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}
Pete OK
fonte
3
Isso é problemático para usuários com leitores de tela. Se você não alterar a visibilidade ou a exibição do elemento e não fornecer dicas de ária, seu texto "invisível" ainda poderá ser lido por um leitor de tela.
Compilador conspícuo
8

Substituição de texto com pseudoelementos e visibilidade 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.";
}
Ahsan Aftab
fonte
3

Usando um pseudo-elemento, esse método não requer conhecimento do elemento original e não requer nenhuma marcação adicional.

#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;
}
Vin
fonte
2

Isso implementa uma caixa de seleção como um botão que mostra Sim ou Não, dependendo do estado 'marcado'. Por isso, demonstra uma maneira de substituir o texto usando CSS sem precisar escrever nenhum código.

Ele ainda se comportará como uma caixa de seleção ao retornar (ou não retornar) um valor POST, mas, do ponto de vista da exibição, parece um botão de alternância.

As cores podem não ser do seu agrado, elas estão lá apenas para ilustrar um ponto.

O HTML é:

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

... e o CSS é:

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

Eu só tentei no Firefox, mas é CSS padrão, portanto deve funcionar em outro lugar.

Steve Douglas
fonte
2

Ao contrário do que vejo em todas as outras respostas, você não precisa usar pseudo elementos para substituir o conteúdo de uma tag por uma imagem

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

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }
Estecka
fonte
2
A partir do CSS2, contentaplica-se apenas a :beforee :after. O CSS3 o estende a tudo, mas o módulo Conteúdo Gerado ainda está no status de rascunho, portanto, qualquer uso depende muito do navegador.
MREC
1
O que é um "balise" ? Não " 1. (Sistema Europeu de Controle de Trens) Um farol eletrônico ou transponder colocado entre os trilhos de um trilho " , presumo. (Por favor, responda editando sua pergunta , não aqui nos comentários).)
Peter Mortensen
1

Isso não é realmente possível sem truques. Aqui está uma maneira que funciona substituindo o texto por uma imagem de texto.

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

Esse tipo de coisa geralmente é feito com JavaScript. Aqui está como isso pode ser feito com o jQuery:

$('.pvw-title').text('new text');
Nathan Manousos
fonte
3
Também não posso usar Javascript: /
MokiTa 25/10
1
Esta é a única maneira que acho que poderia funcionar: extensão .pvw-title [style * = "color: # 000, tamanho da fonte: 14px;"] {visibilidade: oculta; } .pvw-title span [style * = "color: # 000; tamanho da fonte: 14px;"]: depois de {visibilidade: visível; cor: # 000; tamanho da fonte: 14 px; conteúdo: "Teste"; } Mas, uma vez que ambos usando o mesmo estilo, eu não posso fazer isso ..: /
MokiTa
por que você selecioná-lo com base na cor / fonte?
Nathan Manousos
Você o selecionaria com base em todo o estilo, para que eu possa editar esse título específico e não os dois, pois os dois têm o mesmo nome "div".
MokiTa
1

Eu tive um problema em que precisei substituir o texto do link, mas não consegui usar JavaScript nem alterei diretamente o texto de um hiperlink, pois ele foi compilado a partir do XML. Além disso, eu não podia usar pseudo-elementos, ou eles não pareciam funcionar quando eu os havia experimentado.

Basicamente, coloquei o texto que eu queria em um espaço e coloquei a âncora embaixo dele e envolvi os dois em uma div. Basicamente, movi a tag de âncora para cima via CSS e tornei a fonte transparente. Agora, quando você passa o mouse sobre o intervalo, ele "age" como um link. Uma maneira realmente hacky de fazer isso, mas é assim que você pode ter um link com texto diferente ...

Este é um pouco de como eu resolvi esse problema

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

Meu CSS

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

O CSS precisará mudar com base em seus requisitos, mas esta é uma maneira geral de fazer o que você está pedindo.

Todo-Poderoso
fonte
1
@AlmightPor que eu suspeito que isso tenha diminuído o voto porque esta solução requer modificação da marcação e eu suspeito que se o OP pudesse modificar a marcação, ele apenas alteraria o texto diretamente. Em outras palavras, o OP exigia uma solução somente CSS
dannie.f 21/02
1

Encontrei uma solução como essa em que uma palavra "Escura" seria reduzida para apenas "D" em uma largura menor da tela. Basicamente, você apenas faz o tamanho da fonte do conteúdo original 0 e tem a forma abreviada como um pseudo-elemento.

Neste exemplo, a alteração ocorre ao passar o mouse:

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>

StefanBob
fonte
1

Depois de oito anos, enfrentei o mesmo desafio ao tentar usar o Stylish extensão do navegador para alterar algo em um site (não o meu). E desta vez eu fiz funcionar, analisando o código-fonte usando "elemento de inspeção" e criei o código CSS com base nisso.

Isto é o que parecia antes:

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

Esta é a mesma parte do HTML e do CSS que usei para modificar o estilo:

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>

Você pode executar o código acima e verá que ele funciona (testado no Chrome).


Isso é simplesmente o que eu queria nos dias em que fiz essa pergunta.

Eu estava usando algum tipo de blog da comunidade / Myspace material semelhante ao e a única coisa que você tinha ao criar seu perfil era o editor de CSS deles, e é por isso que eu queria selecioná-lo com base no estilo.

Encontrei a resposta aqui:

MokiTa
fonte
0

A maneira de fazer isso funcionar é adicionar altura da linha ao conteúdo CSS. Isso fará com que o bloco seja visto acima do oculto, portanto, não ocultará o texto alterado.

Exemplo com o uso anterior :

.pvw-title span {
  display: none;
}

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

Bem, como muitos disseram que isso é um hack. No entanto, eu gostaria de adicionar um hack mais atualizado, que aproveita flexboxe rem, por exemplo,

  • Você não deseja posicionar manualmente este texto para ser alterado, é por isso que você gostaria de aproveitar flexbox
  • Você não deseja usar paddinge / ou usar margino texto explicitamente px, o que, para diferentes tamanhos de tela em diferentes dispositivos e navegadores, pode gerar resultados diferentes

Aqui está a solução, em suma, flexboxgarante que ela seja automaticamente posicionada perfeitamente e remseja uma alternativa mais padronizada (e automatizada) para pixels.

CodeSandbox com código abaixo e saída na forma de captura de tela, leia noteabaixo o código!

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

Nota: para tags diferentes das quais você pode precisar de valores diferentes rem, essa foi justificada para h1e somente em telas grandes. No entanto, @mediavocê pode estender isso facilmente para dispositivos móveis.

Um truque para substituir o texto HTML usando CSS

Daniel Danielecki
fonte