Bagaimana saya bisa mengganti teks dengan CSS?

Bagaimana saya bisa mengganti teks dengan CSS menggunakan metode seperti ini:

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

Alih-alih ( img[src*="IKON.img"] ), saya harus menggunakan sesuatu yang bisa menggantikan teks.

Saya harus menggunakannya [ ]untuk membuatnya bekerja.

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

Saya perlu mengganti " Fakta ".

Atau mungkin Anda bisa membungkus putaran 'Fakta' <span>sebagai berikut:

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

Kemudian gunakan:

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

Wajib : Ini adalah retasan: CSS bukan tempat yang tepat untuk melakukan ini, tetapi dalam beberapa situasi - misalnya, Anda memiliki perpustakaan pihak ketiga dalam iframe yang hanya dapat dikustomisasi oleh CSS - retasan semacam ini adalah satu-satunya pilihan .

Anda dapat mengganti teks melalui CSS. Mari kita ganti tombol hijau dengan 'halo' dengan tombol merah yang bertuliskan 'selamat tinggal' , menggunakan CSS.

Sebelum:

Setelah:

Lihat http://jsfiddle.net/ZBj2m/274/ untuk demo langsung:

Inilah tombol hijau kami:

<button>Hello</button>

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

Sekarang mari kita sembunyikan elemen asli, tetapi tambahkan elemen blok lain setelahnya:

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

catatan:

• Kami secara eksplisit perlu menandai ini sebagai elemen blok, elemen 'setelah' sebaris secara default
• Kita perlu mengkompensasi elemen asli dengan menyesuaikan posisi elemen semu.
• Kita harus menyembunyikan elemen asli dan menampilkan elemen pseudo menggunakan visibility. Catatan display: nonepada elemen asli tidak berfungsi.

Jika Anda ingin menggunakan elemen semu dan membiarkannya memasukkan konten, Anda dapat melakukan hal berikut. Itu tidak mengasumsikan pengetahuan tentang elemen asli dan tidak memerlukan markup tambahan.

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

Contoh JSFiddle

Berdasarkan jawaban mikemaccana , ini berhasil untuk saya

button {
  position: absolute;
  visibility: hidden;
}

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

§ Penentuan posisi absolut

suatu elemen yang diposisikan secara absolut dikeluarkan dari aliran dan dengan demikian tidak memakan ruang ketika menempatkan elemen-elemen lain.

Ini sederhana, singkat, dan efektif. Tidak diperlukan HTML tambahan.

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

Saya harus melakukan ini untuk mengganti teks tautan, selain rumah, untuk remah roti WooCommerce

Sass / Kurang

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

Anda tidak bisa, yah, Anda bisa.

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

Ini akan menyisipkan konten setelah konten elemen saat ini. Ini tidak benar-benar menggantikannya, tetapi Anda dapat memilih untuk div kosong, dan menggunakan CSS untuk menambahkan semua konten.

Tetapi sementara Anda sedikit banyak bisa, Anda tidak seharusnya melakukannya. Konten yang sebenarnya harus dimasukkan dalam dokumen. Properti konten terutama ditujukan untuk markup kecil, seperti tanda kutip di sekitar teks yang akan muncul dikutip.

Coba gunakan :beforedan :after. Satu memasukkan teks setelah HTML di-render, dan yang lainnya memasukkan sebelum HTML di-render. Jika Anda ingin mengganti teks, biarkan konten tombol kosong.

Contoh ini menetapkan teks tombol sesuai dengan ukuran lebar layar.

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

Teks tombol:

1. Dengan :before

   screenxxx besar

   layar lebar

2. Dengan :after

   layar xxxbig

   layar lebar

Jika Anda hanya ingin menampilkan teks atau gambar yang berbeda, biarkan tag kosong dan tulis konten Anda di beberapa atribut data seperti itu <span data-text1="Hello" data-text2="Bye"></span>. Tampilkan dengan salah satu kelas pseudo:before {content: attr(data-text1)}

Sekarang Anda memiliki banyak cara berbeda untuk beralih di antara mereka. Saya menggunakannya dalam kombinasi dengan permintaan media untuk pendekatan desain responsif untuk mengubah nama navigasi saya menjadi ikon.

demonstrasi dan contoh jsfiddle

_{Ini mungkin tidak menjawab pertanyaan dengan sempurna, tetapi memuaskan kebutuhan saya dan mungkin orang lain juga.}

Saya memiliki lebih beruntung pengaturan font-size: 0dari unsur luar, dan font-sizedari :afterpemilih untuk apa pun yang diperlukan.

Ini bekerja untuk saya dengan teks sebaris. Itu diuji di Firefox, Safari, Chrome, dan 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;
}

Saya menggunakan trik ini:

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

Saya bahkan menggunakan ini untuk menangani internasionalisasi halaman dengan hanya mengubah kelas dasar ...

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

Penggantian teks dengan elemen semu dan visibilitas 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.";
}

Menggunakan elemen pseudo, metode ini tidak memerlukan pengetahuan tentang elemen asli dan tidak memerlukan markup tambahan.

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

Ini mengimplementasikan kotak centang sebagai tombol yang menunjukkan Ya atau Tidak tergantung pada status 'dicentang'. Jadi itu menunjukkan satu cara mengganti teks menggunakan CSS tanpa harus menulis kode apa pun.

Itu masih akan berperilaku seperti kotak centang sejauh mengembalikan (atau tidak mengembalikan) nilai POST, tetapi dari sudut pandang tampilan sepertinya tombol toggle.

Warna mungkin tidak sesuai dengan keinginan Anda, mereka hanya ada di sana untuk menggambarkan suatu titik.

HTML-nya adalah:

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

... dan CSSnya adalah:

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

Saya hanya mencobanya di Firefox, tapi itu CSS standar sehingga harus bekerja di tempat lain.

Tidak seperti apa yang saya lihat di setiap jawaban lainnya, Anda tidak perlu menggunakan elemen semu untuk mengganti konten tag dengan gambar

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

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

Ini tidak mungkin tanpa trik. Berikut ini cara kerjanya dengan mengganti teks dengan gambar teks.

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

Jenis hal ini biasanya dilakukan dengan JavaScript. Inilah cara melakukannya dengan jQuery:

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

Saya punya masalah ketika saya harus mengganti teks tautan, tetapi saya tidak bisa menggunakan JavaScript dan saya tidak bisa langsung mengubah teks hyperlink karena dikompilasi dari XML. Juga, saya tidak bisa menggunakan elemen pseudo, atau mereka tampaknya tidak berfungsi ketika saya mencobanya.

Pada dasarnya, saya meletakkan teks yang saya inginkan ke dalam rentang dan meletakkan tag jangkar di bawahnya dan membungkus keduanya menjadi div. Saya pada dasarnya memindahkan tag anchor ke atas melalui CSS dan kemudian membuat font transparan. Sekarang ketika Anda mengarahkan kursor, itu "bertindak" seperti sebuah tautan. Cara yang sangat aneh untuk melakukan ini, tetapi ini adalah bagaimana Anda dapat memiliki tautan dengan teks yang berbeda ...

Ini adalah biola bagaimana saya mengatasi masalah ini

HTML saya

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

CSS saya

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

CSS perlu diubah berdasarkan kebutuhan Anda, tetapi ini adalah cara umum untuk melakukan apa yang Anda minta.

Saya menemukan solusi seperti ini di mana sebuah kata, "Gelap", akan disingkat menjadi "D" pada lebar layar yang lebih kecil. Pada dasarnya Anda hanya membuat ukuran font dari konten asli 0 dan memiliki bentuk singkat sebagai elemen pseudo.

Dalam contoh ini, perubahan terjadi pada hover:

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>

Setelah delapan tahun, saya menghadapi tantangan yang sama ketika mencoba menggunakan ekstensi browser Stylish untuk mengubah sesuatu di situs web (bukan milik saya). Dan kali ini saya membuatnya bekerja dengan melihat kode sumber menggunakan "elemen inspeksi" dan membuat kode CSS berdasarkan itu.

Ini seperti apa itu sebelumnya:

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

Ini adalah bagian yang sama dari HTML dan CSS yang saya gunakan untuk memodifikasi gaya:

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>

Anda dapat menjalankan kode di atas dan Anda akan melihatnya berfungsi (diuji di Chrome).

_{Ini hanya apa yang saya inginkan pada masa ketika saya menanyakan pertanyaan ini.}

_{Saya menggunakan semacam komunitas blog / Myspace hal serupa dan satu-satunya yang Anda miliki ketika menata profil Anda adalah editor CSS mereka, dan itulah sebabnya saya ingin memilihnya berdasarkan gaya.}

Saya menemukan jawabannya di sini:

• Pemilih CSS Tingkat Lanjut - Pilih berdasarkan gaya

• Selektor CSS menurut atribut gaya sebaris

Cara untuk membuat pekerjaan ini adalah dengan menambahkan ketinggian baris ke konten CSS. Ini akan membuat blok terlihat di atas yang tersembunyi, sehingga ini tidak akan menyembunyikan teks yang diubah.

Contoh dengan penggunaan sebelumnya :

.pvw-title span {
  display: none;
}

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

Yah, seperti banyak yang bilang ini adalah hack. Namun, saya ingin menambahkan lebih banyak peretasan terkini, yang memanfaatkan flexboxdan rem, yaitu

• Anda tidak ingin posisi teks ini diubah secara manual, itu sebabnya Anda ingin memanfaatkannya flexbox
• Anda tidak ingin menggunakan paddingdan / atau marginmenggunakan teks secara eksplisit px, yang untuk ukuran layar berbeda pada perangkat dan browser yang berbeda mungkin memberikan hasil yang berbeda.

Inilah solusinya, singkatnya flexboxmemastikan bahwa itu diposisikan secara otomatis dengan sempurna dan remlebih terstandarisasi (dan otomatis) alternatif untuk piksel.

CodeSandbox dengan kode di bawah ini dan output dalam bentuk screenshot, silakan baca di notebawah kode!

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

Catatan: untuk tag yang berbeda Anda mungkin memerlukan nilai yang berbeda, tag remini telah dibenarkan untuk h1dan hanya pada layar besar. Namun dengan @mediaAnda dapat dengan mudah memperluas ini ke perangkat seluler.