Como posso substituir texto por CSS?

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

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

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:

Depois de:

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.

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

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.

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

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.

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

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

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

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

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

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

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

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.

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

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

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.

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>

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:

• Seletor de CSS avançado - selecione com base no estilo

• Seletor CSS por atributo de estilo embutido

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
}

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.