Jak mogę zamienić tekst na CSS?

Jak mogę zamienić tekst na CSS za pomocą metody takiej jak ta:

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

Zamiast ( img[src*="IKON.img"] ) muszę użyć czegoś, co może zastąpić tekst.

Muszę użyć, [ ]żeby to zadziałało.

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

Muszę zastąpić „ Fakty ”.

A może możesz zawinąć „Fakty” w <span>następujący sposób:

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

Następnie użyj:

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

Obowiązkowy : To jest włamanie: CSS nie jest odpowiednim miejscem do zrobienia tego, ale w niektórych sytuacjach - np. Masz bibliotekę innej firmy w ramce iframe, którą można dostosować tylko za pomocą CSS - ten rodzaj włamania jest jedyną opcją .

Możesz zastąpić tekst za pomocą CSS. Zastąpmy zielony przycisk „cześć” czerwonym przyciskiem, który mówi „do widzenia” , używając CSS.

Przed:

Po:

Zobacz http://jsfiddle.net/ZBj2m/274/ aby zobaczyć demo na żywo:

Oto nasz zielony przycisk:

<button>Hello</button>

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

Teraz ukryjmy oryginalny element, ale dodajmy kolejny element blokowy:

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

Uwaga:

• Musimy wyraźnie zaznaczyć to jako element blokowy, domyślnie elementy „po” są wstawiane
• Musimy zrekompensować oryginalny element, dostosowując pozycję pseudoelementu.
• Musimy ukryć oryginalny element i wyświetlić za pomocą pseudoelementu visibility. Uwaga display: nonedotycząca oryginalnego elementu nie działa.

Jeśli chcesz użyć pseudoelementów i pozwolić im wstawiać treść, możesz wykonać następujące czynności. Nie zakłada znajomości oryginalnego elementu i nie wymaga dodatkowych znaczników.

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

Przykład JSFiddle

Na podstawie odpowiedzi mikemaccana zadziałało to dla mnie

button {
  position: absolute;
  visibility: hidden;
}

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

§ Pozycjonowanie absolutne

element, który jest ustawiony absolutnie, jest usuwany z przepływu, a zatem nie zajmuje miejsca podczas umieszczania innych elementów.

To jest proste, krótkie i skuteczne. Nie jest wymagany dodatkowy kod HTML.

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

Musiałem to zrobić, aby zastąpić tekst linku, inny niż domowy, dla bułki tartej 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;
}

Nie możesz, cóż, możesz.

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

Spowoduje to wstawienie treści po bieżącej zawartości elementu. W rzeczywistości go nie zastępuje, ale możesz wybrać pusty div i użyć CSS, aby dodać całą zawartość.

Ale chociaż mniej więcej możesz, nie powinieneś. Rzeczywista treść powinna zostać umieszczona w dokumencie. Właściwość content jest przeznaczona głównie do małych znaczników, takich jak cudzysłowy wokół tekstu, który powinien wyglądać na cytowany.

Spróbuj użyć :beforei:after . Jeden wstawia tekst po renderowaniu HTML, a drugi wstawia przed renderowaniem HTML. Jeśli chcesz zastąpić tekst, pozostaw pustą treść przycisku.

Ten przykład ustawia tekst przycisku zgodnie z rozmiarem szerokości ekranu.

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

Przycisk tekstowy:

1. Z :before

   duży ekran xxx

   duży ekran

2. Z :after

   ekran xxxbig

   duży ekran

Jeśli chcesz po prostu pokazać różne teksty lub obrazy, zachować tag opróżnić i pisać treści w wielu atrybutów danych , jak to <span data-text1="Hello" data-text2="Bye"></span>. Wyświetlaj je za pomocą jednej z pseudo klas:before {content: attr(data-text1)}

Teraz masz wiele różnych sposobów przełączania się między nimi. Użyłem ich w połączeniu z zapytaniami o media w celu responsywnego podejścia projektowego, aby zmienić nazwy mojej nawigacji na ikony.

Demonstracja jsfiddle i przykłady

_{Może nie idealnie odpowiada na pytanie, ale zaspokoiło moje potrzeby, a może i inne.}

Miałem lepsze zachodzącego szczęścia font-size: 0elementu zewnętrznego, a także font-sizez :afterwybieraka do czegokolwiek potrzebne.

To działało dla mnie z tekstem wbudowanym. Został przetestowany w Firefox, Safari, Chrome i 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;
}

Używam tej sztuczki:

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

Użyłem tego nawet do obsługi internacjonalizacji stron, po prostu zmieniając klasę podstawową ...

.translate-es .welcome {
    text-indent: -999px;
}
.translate-es .welcome:after {
    text-indent: 0px;
    float: left;
    content: '¡Bienvenidos!';
}

Zastępowanie tekstu pseudoelementami i widoczność 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.";
}

Używając pseudoelementu, ta metoda nie wymaga znajomości oryginalnego elementu i nie wymaga żadnych dodatkowych znaczników.

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

To implementuje pole wyboru jako przycisk, który pokazuje Tak lub Nie, w zależności od jego stanu „zaznaczonego”. Pokazuje więc jeden sposób zamiany tekstu przy użyciu CSS bez konieczności pisania kodu.

Zachowuje się jak pole wyboru, jeśli chodzi o zwracanie (lub nie zwracanie) wartości POST, ale z punktu widzenia wyświetlania wygląda jak przycisk przełączania.

Kolory mogą nie pasować do twoich upodobań, są one tylko po to, by zilustrować punkt.

HTML to:

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

... a CSS to:

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

Próbowałem tylko w przeglądarce Firefox, ale jest to standardowy CSS, więc powinien działać gdzie indziej.

W przeciwieństwie do tego, co widzę w każdej innej odpowiedzi, nie musisz używać pseudoelementów, aby zastąpić zawartość znacznika obrazem

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

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

To naprawdę nie jest możliwe bez sztuczek. Oto sposób, który działa, zastępując tekst obrazem tekstu.

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

Tego typu czynności zwykle wykonuje się za pomocą JavaScript. Oto, jak można to zrobić za pomocą jQuery:

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

Wystąpił problem polegający na tym, że musiałem zastąpić tekst linku, ale nie mogłem użyć JavaScript ani nie mogłem bezpośrednio zmienić tekstu hiperłącza, ponieważ został on skompilowany z XML. Poza tym nie mogłem użyć pseudoelementów lub wydawało się, że nie działały, gdy je wypróbowałem.

Zasadniczo umieściłem tekst, który chciałem, w rozpiętości i pod spodem umieściłem tag zakotwiczenia i zawinąłem oba w div. Zasadniczo przesunąłem tag zakotwiczenia w górę za pomocą CSS, a następnie uczyniłem czcionkę przezroczystą. Teraz po najechaniu kursorem na zakres „działa” jak łącze. Naprawdę hacking sposób, ale w ten sposób możesz mieć link z innym tekstem ...

To jest skrzypce, jak poradziłem sobie z tym problemem

Mój 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>

Mój CSS

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

CSS będzie musiał się zmienić w zależności od twoich wymagań, ale jest to ogólny sposób robienia tego, o co prosisz.

Znalazłem takie rozwiązanie, w którym słowo „Dark” byłoby skrócone do „D” na mniejszej szerokości ekranu. Zasadniczo po prostu ustawiasz rozmiar czcionki oryginalnej treści na 0 i masz skróconą formę jako pseudoelement.

W tym przykładzie zmiana następuje po najechaniu myszą:

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>

Po ośmiu latach stanąłem przed tym samym wyzwaniem, próbując używać stylowego rozszerzenia przeglądarki do zmiany czegoś na stronie internetowej (nie mojej). I tym razem sprawiłem, że działało, patrząc na kod źródłowy za pomocą „inspect element” i na tej podstawie stworzyłem kod CSS.

Tak to wyglądało wcześniej:

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

To jest ten sam fragment kodu HTML i CSS, którego użyłem do modyfikacji stylu:

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>

Możesz uruchomić powyższy kod, a zobaczysz, że działa (testowany w Chrome).

_{Właśnie tego chciałem w czasach, kiedy zadawałem to pytanie.}

_{Korzystałem z jakiegoś bloga społeczności / Myspace podobnych i jedyną rzeczą, którą miałeś podczas stylizowania swojego profilu był ich edytor CSS, i dlatego chciałem wybrać go na podstawie stylu.}

Znalazłem odpowiedź tutaj:

• Zaawansowany selektor CSS - Wybierz na podstawie stylu

• Selektor CSS według wbudowanego atrybutu stylu

Sposobem na to, aby działał, jest dodanie wysokości linii do treści CSS. Spowoduje to, że blok będzie widoczny nad ukrytym, a zatem nie ukryje zmienionego tekstu.

Przykład użycia przed :

.pvw-title span {
  display: none;
}

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

Cóż, jak wielu twierdziło, to hack. Chciałbym jednak dodać bardziej aktualny hack, który wykorzystuje flexboxi rem, tj

• Nie chcesz ręcznie pozycjonować tego tekstu, aby go zmienić, dlatego chcesz skorzystać flexbox
• Nie chcesz używać paddingi / lub marginjawnie używać tekstu px, który dla różnych rozmiarów ekranu na różnych urządzeniach i przeglądarkach może dawać różne wyniki

Oto rozwiązanie, w skrócie flexboxupewniające się, że jest automatycznie pozycjonowane idealnie i remjest bardziej znormalizowaną (i zautomatyzowaną) alternatywą dla pikseli.

CodeSandbox z kodem poniżej i wyjściem w postaci zrzutu ekranu, proszę przeczytać noteponiższy kod!

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

Uwaga: w przypadku różnych tagów możesz potrzebować różnych wartości rem, ten został uzasadniony h1i tylko na dużych ekranach. Jednak z @mediałatwością możesz rozszerzyć to na urządzenia mobilne.