Metni CSS ile nasıl değiştirebilirim?

Nasıl böyle bir yöntem kullanarak metin CSS ile değiştirebilirsiniz:

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

( img[src*="IKON.img"] ) Yerine, bunun yerine metnin yerini alabilecek bir şey kullanmam gerekiyor.

[ ]Çalışmak için kullanmalıyım .

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

" Gerçekler " i değiştirmem gerekiyor .

Ya da belki 'Gerçekler' a'yı <span>aşağıdaki gibi sarabilirsiniz :

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

Sonra kullan:

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

Zorunlu : Bu bir hack: CSS bunu yapmak için doğru yer değil, ancak bazı durumlarda - örneğin, bir iframe'de yalnızca CSS tarafından özelleştirilebilen bir üçüncü taraf kütüphaneniz var - bu tür bir hack tek seçenektir .

Metni CSS ile değiştirebilirsiniz. Yeşil bir düğmeyi 'merhaba' yerine 'elveda' yazan kırmızı bir düğmeyle CSS kullanarak değiştirelim.

Önce:

Sonra:

Bkz. Http://jsfiddle.net/ZBj2m/274/Canlı bir demo için :

İşte yeşil düğmemiz:

<button>Hello</button>

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

Şimdi orijinal öğeyi gizleyelim, ancak daha sonra başka bir blok öğesi ekleyelim:

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

Not:

• Bunu açıkça bir blok öğesi olarak işaretlememiz gerekiyor, 'after' öğeleri varsayılan olarak satır içi
• Sözde elemanın konumunu ayarlayarak orijinal elemanı telafi etmeliyiz.
• Orijinal öğeyi gizlemeli ve sözde öğeyi kullanarak göstermeliyiz visibility. Not display: noneorijinal eleman üzerinde çalışmaz.

Yalancı öğeleri kullanmaya ve içerik eklemelerine izin vermek istiyorsanız, aşağıdakileri yapabilirsiniz. Orijinal öğe hakkında bilgi sahibi değildir ve ek işaretleme gerektirmez.

.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 Örneği

Mikemaccana'nın cevabına dayanarak , bu benim için çalıştı

button {
  position: absolute;
  visibility: hidden;
}

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

§ Mutlak konumlandırma

kesinlikle konumlandırılmış bir eleman akıştan çıkarılır ve böylece diğer elemanları yerleştirirken yer kaplamaz.

Bu basit, kısa ve etkilidir. Ek HTML gerekmez.

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

WooCommerce için ev dışında bağlantı metnini değiştirmek için bunu yapmak zorunda kaldım ekmek kırıntıları

Sass / Daha Az

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

Yapamazsın, yapabilirsin.

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

Bu , öğenin geçerli içeriğinden sonra içerik ekleyecektir . Aslında onun yerini almaz, ancak boş bir div seçebilir ve tüm içeriği eklemek için CSS kullanabilirsiniz.

Ama az ya da çok yapabiliyorken yapmamalısın. Gerçek içerik belgeye konulmalıdır. Content özelliği, alıntılanan metnin etrafındaki tırnak işaretleri gibi temel olarak küçük biçimlendirme için tasarlanmıştır.

Kullanmayı deneyin :beforeve:after . Biri HTML oluşturulduktan sonra metin eklerken diğeri HTML oluşturulduktan önce ekler. Metni değiştirmek istiyorsanız, düğme içeriğini boş bırakın.

Bu örnek, düğme metnini ekran genişliğinin boyutuna göre ayarlar.

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

Düğme metni:

1. İle :before

   büyük screenxxx

   büyük ekran

2. İle :after

   xxxbig ekran

   büyük ekran

Yalnızca farklı metinler veya resimler göstermek istiyorsanız , etiketi boş tutun ve içeriğinizi bunun gibi birden çok veri özelliğine yazın<span data-text1="Hello" data-text2="Bye"></span> . Onları sözde sınıflardan biriyle göster:before {content: attr(data-text1)}

Şimdi, aralarında geçiş yapmanın farklı yolları var. Simgeleri, navigasyonumun adlarını simgelere değiştirmek için duyarlı bir tasarım yaklaşımı için medya sorgularıyla birlikte kullandım.

jsfiddle gösteri ve örnekler

_{Soruyu mükemmel bir şekilde cevaplamayabilir, ancak ihtiyaçlarımı ve belki de diğerlerini karşıladı.}

Ben ayarını iyi şans oldu font-size: 0dış elemanın ve font-sizebir :afterselektör ben her türlü ihtiyaç için.

Bu benim için satır içi metinle işe yaradı. Firefox, Safari, Chrome ve Opera'da test edildi.

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

Bu hileyi kullanıyorum:

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

Hatta bunu sadece bir temel sınıfı değiştirerek sayfaların uluslararasılaştırılmasını sağlamak için kullandım

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

Sahte öğeler ve CSS görünürlüğü ile metin değiştirme

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

Bir sözde öğe kullanarak, bu yöntem orijinal öğe hakkında bilgi gerektirmez ve ek işaretleme gerektirmez.

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

Bu, 'işaretli' durumuna bağlı olarak Evet veya Hayır'ı gösteren bir düğme olarak onay kutusunu uygular. Bu nedenle, herhangi bir kod yazmak zorunda kalmadan CSS kullanarak metni değiştirmenin bir yolunu gösterir.

Yine de bir POST değeri döndürdüğü (veya geri döndürmediği) bir onay kutusu gibi davranacaktır, ancak görüntüleme açısından bir geçiş düğmesi gibi görünür.

Renkler hoşunuza gitmeyebilir, sadece bir noktayı göstermek için oradalar.

HTML:

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

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

Ben sadece Firefox üzerinde denedim, ama standart CSS bu yüzden başka bir yerde çalışması gerekir.

Diğer her cevapta gördüğümden farklı olarak , bir etiketin içeriğini bir resimle değiştirmek için sözde öğeler kullanmanıza gerek yoktur

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

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

Bu hile olmadan gerçekten mümkün değil. İşte metni bir metin görüntüsüyle değiştirerek çalışan bir yol.

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

Bu tür şeyler genellikle JavaScript ile yapılır. JQuery ile nasıl yapılabilir:

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

Bağlantı metnini değiştirmek zorunda kaldım, ancak JavaScript kullanamadım veya XML'den derlendiği için bir köprü metnini doğrudan değiştiremedim. Ayrıca, sözde öğeleri kullanamadım, ya da onları denediğimde işe yaramadılar.

Temel olarak, istediğim metni bir açıklığa koydum ve çapa etiketini altına koydum ve her ikisini de bir div içine sardım. Temelde çapa etiketini CSS ile yukarı taşıdım ve ardından yazı tipini şeffaf hale getirdim. Şimdi yayılma alanının üzerine geldiğinizde, bir bağlantı gibi davranır. Bunu yapmanın gerçekten hacky bir yolu, ama farklı metin ile bir bağlantı bu şekilde olabilir ...

Bu, bu sorunu nasıl çözdüğümün bir kemanı

HTML kodum

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

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

CSS'nin gereksinimlerinize göre değişmesi gerekecektir, ancak bu, istediğinizi yapmanın genel bir yoludur.

"Karanlık" kelimesinin daha küçük ekran genişliğinde sadece "D" ye kısaltılacağı böyle bir çözüm buldum. Temel olarak sadece orijinal içeriğin yazı tipi boyutunu 0 yaparsınız ve sözde öğe olarak kısaltılmış forma sahip olursunuz.

Bu örnekte, değişiklik fareyle üzerine gelindiğinde gerçekleşir:

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>

Sekiz yıl sonra, Şık'ı kullanmaya çalışırken aynı zorlukla karşılaştım. , bir web sitesinde (benim değil) bir şey değiştirmek tarayıcı uzantısını . Ve bu kez "inspect element" kullanarak kaynak koduna bakarak çalışmasını sağladı ve buna dayalı CSS kodu yarattı.

Daha önce böyle görünüyordu:

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

Bu, HTML'yi ve stili değiştirmek için kullandığım CSS'nin aynı parçasıdır:

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>

Yukarıdaki kodu çalıştırabilir ve çalıştığını görürsünüz (Chrome'da test edilmiştir).

_{Bu soruyu sorduğum günlerde geri istediğim şey bu.}

_{Bir çeşit topluluk blogu / Myspace kullanıyordum benzer şeyler kullanıyordum ve profilinizi şekillendirirken sahip olduğunuz tek şey CSS editörüydü ve bu yüzden stile göre seçmek istedim.}

Cevabı burada buldum:

• Gelişmiş CSS Seçici - Şekillendirmeye göre seçin

• Satır içi stil özelliğine göre CSS seçici

Bu çalışmanın yolu, CSS içeriğine satır yüksekliği eklemektir. Bu, bloğun gizli görünmesini sağlar, böylece bu değiştirilen metni gizlemez.

Daha önce kullanılan örnek :

.pvw-title span {
  display: none;
}

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

Pek çoğunun dediği gibi bu bir hack. Ancak, ben bir yararlanır daha yukarı güncel hack, eklemek istediğiniz flexboxve rem, yani

• Bu metni değiştirilmek üzere manuel olarak konumlandırmak istemezsiniz, bu yüzden aşağıdakilerden yararlanmak istersiniz: flexbox
• Farklı cihazlarda ve tarayıcılarda farklı ekran boyutları için farklı çıktılar verebilecek açık bir şekilde kullanmak paddingve / veya marginmetni kullanmak istemezsiniz.px

Kısacası çözüm, flexboxotomatik olarak mükemmel bir şekilde konumlandırılmasını ve rempikseller için daha standart (ve otomatik) alternatif olmasını sağlar.

Aşağıdaki kod ve ekran görüntüsü şeklinde çıktı ile CodeSandbox , lütfen notekodun altında bir okuyun !

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

Not: Farklı etiketler için farklı değerlere ihtiyacınız olabilir rem, bu h1yalnızca büyük ekranlar için ve yalnızca büyük ekranlarda haklıdır . Ancak @mediabunu kolayca mobil cihazlara genişletebilirsiniz.