Bagaimana saya dapat mengganti teks dengan css menggunakan metode seperti ini:
.pvw-title img[src*="IKON.img"] { visibility:hidden; }
Bukan ( img[src*="IKON.img"]
), saya perlu menggunakan sesuatu yang dapat menggantikan teks sebaliknya.
Saya harus menggunakan [
]
untuk mendapatkan itu untuk bekerja.
<div class="pvw-judul">Fakta</div>
Saya perlu mengganti "Fakta".
Atau mungkin anda bisa membungkus 'Fakta' putaran <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 hack: CSS isn't tempat yang tepat untuk melakukan hal ini, tetapi dalam beberapa situasi - misalnya, anda memiliki sebuah perpustakaan pihak ketiga dalam iframe yang hanya dapat disesuaikan dengan CSS - jenis hack adalah satu-satunya pilihan.
Anda dapat mengganti teks dengan CSS. Let's mengganti tombol hijau dengan 'halo' dengan tombol merah yang bertuliskan 'selamat tinggal', dengan menggunakan CSS.
Sebelumnya:
Setelah:
Lihat
untuk live demo:Berikut ini's kita tombol hijau:
<button>Hello</button>
button {
background-color: green;
color: black;
padding: 5px;
}
Sekarang mari's menyembunyikan elemen asli, tetapi menambahkan elemen blok sesudahnya:
button {
visibility: hidden;
}
button:after {
content:'goodbye';
visibility: visible;
display: block;
position: absolute;
background-color: red;
padding: 5px;
top: 2px;
}
Catatan:
. Catatan
display: none` pada elemen asli doesn't bekerja.Jika anda're bersedia untuk menggunakan pseudo elemen dan membiarkan mereka menyisipkan konten, anda dapat melakukan berikut ini. Itu doesn't mengasumsikan pengetahuan tentang unsur asli dan doesn't membutuhkan tambahan markup.
.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 */
}
[JSFiddle Contoh][1]
Berdasarkan mikemaccana jawaban, ini bekerja untuk saya
button {
position: absolute;
visibility: hidden;
}
button:before {
content: "goodbye";
visibility: visible;
}
sebuah elemen yang benar-benar diposisikan diambil dari aliran dan dengan demikian mengambil tidak ada ruang ketika menempatkan unsur-unsur lain.
Sederhana, Singkat, Dan Efektif. Tidak ada tambahan html yang diperlukan.
.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 */
}
Aku harus melakukan ini untuk mengganti link teks, lain dari rumah, untuk woocommerce remah roti
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 dapat't, nah, anda bisa.
.pvw-title:after {
content: "Test";
}
Ini akan memasukkan konten setelah saat ini isi dari elemen. Itu doesn't benar-benar menggantinya, tetapi anda dapat memilih untuk kosong div, dan menggunakan CSS untuk menambahkan semua konten.
Tetapi sementara anda lebih atau kurang dapat, anda tidak't. Konten yang sebenarnya harus dimasukkan ke dalam dokumen. Isi properti terutama ditujukan untuk markup kecil, seperti tanda kutip di sekitar teks yang akan muncul dikutip.
Cobalah menggunakan: before dan: after. Satu sisipan teks setelah HTML yang diberikan, sisipan lainnya sebelum HTML yang diberikan. Jika anda ingin mengganti teks, meninggalkan tombol konten kosong.
Ini contoh kumpulan teks tombol sesuai dengan ukuran layar lebar.
<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:
besar screenxxx
layar besar
xxxbig layar
layar besar
Ini mungkin tidak sempurna menjawab pertanyaan, tapi itu memenuhi kebutuhan saya dan mungkin orang lain juga.
Jadi, jika anda hanya ingin menampilkan teks yang berbeda atau gambar, jauhkan tag kosong dan menulis konten anda dalam beberapa data atribut seperti itu <span data-text1="Hello" data-text2="Tinggal"></span>
.
Tampilan mereka dengan salah satu pseudo-class :before {content: attr(data-text1)}
Sekarang anda memiliki banyak cara yang berbeda untuk beralih di antara mereka. Aku digunakan dalam kombinasi dengan media queries untuk desain responsif pendekatan untuk mengubah nama saya navigasi untuk ikon.
[jsfiddle demonstrasi dan contoh][1]
Ini bekerja untuk saya dengan sebaris teks. Diuji di FF, 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';
}
I've bahkan ini digunakan untuk menangani internasionalisasi halaman dengan hanya mengubah dasar kelas...
.translate-es .welcome {
text-indent: -999px;
}
.translate-es .welcome:after {
text-indent: 0px;
float: left;
content: '¡Bienvenidos!';
}
Penggantian teks dengan Pseudo-elemen & CSS Visibility
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 pseudo element, metode ini doesn't membutuhkan pengetahuan tentang unsur asli dan doesn't memerlukan tambahan markup.
#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 checkbox sebagai tombol yang menunjukkan baik Ya atau Tidak tergantung pada 'telah memeriksa' negara. Sehingga hal ini menunjukkan salah satu cara untuk mengganti teks dengan menggunakan CSS tanpa harus menulis kode apapun.
Itu akan tetap berperilaku seperti kotak centang sejauh kembali (atau tidak kembali) POSTING nilai, tapi dari tampilan sudut pandang ini terlihat seperti tombol toggle.
Warna-warna yang mungkin tidak sesuai dengan keinginan anda, mereka're hanya ada untuk menggambarkan suatu titik.
HTML adalah:
<input type="checkbox" class="yesno" id="testcb" /><label for="testcb"><span></span></label>
...dan CSS 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;
}
I've hanya mencobanya di Firefox, tapi itu's standar CSS sehingga harus bekerja di tempat lain.
Tidak seperti apa yang saya lihat di setiap jawaban lain, anda don't need untuk menggunakan pseudo elemen dalam rangka untuk mengganti isi dari balise dengan gambar
div.pvw-title { /* no :after or :before required*/
content: url("your url here");
}
Saya punya masalah di mana saya harus mengganti teks link tapi tidak't menggunakan javascript juga tidak bisa langsung mengubah teks hyperlink seperti yang dihimpun dari XML. Juga, saya tidak't menggunakan pseudo elemen, atau mereka didn't tampaknya bekerja ketika saya telah mencoba mereka.
Pada dasarnya, saya menempatkan teks yang saya ingin menjadi seorang span dan menempatkan anchor tag bawahnya dan dibungkus kedua di div. Pada dasarnya saya pindah anchor tag up melalui css dan kemudian membuat font transparan. Sekarang ketika anda membawa lebih dari rentang waktu itu, "kisah para rasul" seperti link. Benar-benar hacky cara untuk melakukan hal ini, tapi ini adalah bagaimana anda dapat memiliki link dengan teks yang berbeda...
[Ini adalah sebuah biola bagaimana saya mendapatkan sekitar masalah ini](
)Saya 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>
CSS saya
div.field a {
color:transparent;
position:absolute;
top:1%;
}
div.field span {
display:inline-block;
}
CSS akan perlu untuk mengubah didasarkan dari kebutuhan anda, tapi ini adalah cara umum dalam melakukan apa yang anda minta.
Edit: Dapatkah seseorang mengatakan padaku mengapa ini downvoted? Solusi saya bekerja...
cara untuk membuat karya ini adalah untuk menambah line-height css. ini akan membuat blok untuk dilihat di atas tersembunyi sehingga ini tidak akan tersembunyi pada teks berubah.
misalnya dengan menggunakan sebelum:
.pvw-title span {
display: none;
}
.pvw-title:before {
content: 'whatever it is you want to add';
line-height: 1.5em
}
Ini isn't benar-benar mungkin tanpa trik. Berikut adalah cara yang bekerja dengan mengganti teks dengan gambar teks.
.pvw-title{
text-indent:-9999px;
background-image:url(text_image.png)
}
Hal semacam ini biasanya dilakukan dengan Javascript. Berikut adalah bagaimana hal itu bisa dilakukan dengan jQuery:
$('.pvw-title').text('new text');