web-dev-qa-db-ja.com

テキストをCSSに置き換える方法はありますか。

このような方法でテキストをcssに置き換えるにはどうすればよいですか。

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

（img[src*="IKON.img"]）の代わりに、代わりにテキストを置き換えることができる何かを使用する必要があります。

動作させるには[]を使用する必要があります。

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

「事実」を置き換える必要があります。

csstextreplace
255
MokiTa

あるいは、「事実」を次のように<span>にラップすることもできます。

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

それから：

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

必須：これはハックです。CSSはこれを行うのに適切な場所ではありませんが、状況によっては（CSSでしかカスタマイズできないサードパーティ製のライブラリがある場合など） - この種のものハックの唯一の選択肢です。

あなたはCSSを通してテキストを置き換えることができます。 緑色のボタンを 'hello'から 'goodbye'と書かれた赤いボタンに置​​き換えましょう、CSSを使用して。

前：

enter image description here

後：

enter image description here

ライブデモは http://jsfiddle.net/ZBj2m/274/ を参照してください。

これが緑色のボタンです。

<button>Hello</button>

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

それでは元の要素を隠しましょうが、後で別のblock要素を追加しましょう：

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

注意：

  • これをブロック要素として明示的にマークする必要があります。 'after'要素はデフォルトでインラインです。
  • 疑似要素の位置を調整して元の要素を補正する必要があります。
  • 元の要素を隠し、visibilityを使って擬似要素を表示しなければなりません。元の要素のdisplay: noneは機能しません。
188
mikemaccana

疑似要素を使用してコンテンツに挿入させる場合は、次のようにします。元の要素に関する知識を前提としておらず、追加のマークアップも必要ありません。

.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の例

137
James van Dyke

mikemaccanaの回答 に基づくと、これは私のために働きました

button {
  position: absolute;
  visibility: hidden;
}

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

§絶対位置

絶対に配置されている要素はフローから除外されるため、他の要素を配置するときにスペースを取りません。

50
Steven Penny

シンプル、ショート、効果的。追加の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 */
    }

私は、ウーコマースのブレッドクラムのために、家以外のリンクテキストを置き換えるためにこれをしなければなりませんでした

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

できません。

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

これはcontent afterを要素の現在の内容に挿入します。実際には置き換えられませんが、空のdivを選択し、CSSを使用してすべてのコンテンツを追加できます。

しかし、多かれ少なかれできる限り、そうすべきではありません。実際の内容は文書に入れるべきです。 contentプロパティは、引用符で囲む必要があるテキストを囲む引用符など、主に小さなマークアップを目的としています。

18
GolezTrol

：beforeと：afterを使ってみてください。 1つはHTMLのレンダリング後にテキストを挿入し、もう1つはHTMLのレンダリング前にテキストを挿入します。テキストを置き換える場合は、ボタンの内容を空白のままにします。

この例では、画面幅のサイズに従ってボタンのテキストを設定します。

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

ボタンのテキスト：

1）with：before

大きいscreenxxx

大画面

2）with：after

大画面

大画面

13
live-love

それは質問に完全に答えないかもしれませんが、それは私の必要性を満たし、多分他の人たちもそうです

もし異なるテキストや画像を見せたいだけなら、 タグを空のままにして、コンテンツを複数のデータ属性に書き込みます そのような<span data-text1="Hello" data-text2="Bye"></span>。擬似クラス:before {content: attr(data-text1)}のいずれかでそれらを表示します

今、あなたはそれらを切り替えるためのさまざまな方法がたくさんあります。私はナビゲーションの名前をアイコンに変更するためのレスポンシブデザインアプローチのためにメディアクエリと組み合わせてそれらを使用しました。

jsfiddleのデモと例

11
Robbendebiene

これは私にとってインラインテキストでうまくいきました。 FF、Safari、Chrome、および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; 
}
9
Noel Williams

私はこのトリックを使います：

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

私は基本クラスを変更するだけでページの国際化を扱うためにこれを使っています...

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

私は、外側の要素のfont-size: 0とfont-sizeセレクタの:afterを必要なものに設定した方がよかったです。

8
jerome

擬似要素によるテキスト置換と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.";
}
5
Ahsan Aftab

疑似要素を使用するため、このメソッドは元の要素に関する知識を必要とせず、追加のマークアップも必要ありません。

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

これは、 'checked'状態に応じてYesまたはNoのどちらかを表示するボタンとしてチェックボックスを実装します。そのため、コードを記述しなくてもCSSを使用してテキストを置き換える1つの方法を示します。

POST値を返す（または返さない）限り、チェックボックスのように動作しますが、表示の観点から見るとトグルボタンのように見えます。

色はあなたの好みに合っていないかもしれません、彼らはポイントを説明するためにそこにいるだけです。

HTMLは以下のとおりです。

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

...そして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;
}

私はFirefoxでそれを試しただけですが、それは標準的なCSSなので他のところでも動作するはずです。

2
Steve Douglas

リンクのテキストを置き換える必要がありましたが、JavaScriptを使用できず、ハイパーリンクのテキストをXMLからコンパイルされたため直接変更することもできませんでした。また、私は疑似要素を使用することができなかったか、または私がそれらを試したときそれらは働かなかったようです。

基本的には、必要なテキストをスパンに入れ、その下にアンカータグを付けて、両方をdivで囲みました。私は基本的にアンカータグをcssで上に移動してからフォントを透明にしました。これで、スパン上にマウスを移動すると、リンクのように「機能」します。これを行うための本当に厄介な方法ですが、これはあなたが異なるテキストとのリンクを持つことができる方法です...

これは私がこの問題を回避した方法の謎です

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

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

CSSはあなたの要求に基づいて変更する必要がありますが、これはあなたが求めていることをするための一般的な方法です。

編集：これはなぜ下落した理由誰かが私に言うことができますか？私の解決策は….

1
AlmightyWhy

私が他のすべての答えに見るものとは異なり、あなたは 必要ではありません バリスの内容をイメージに置き換えるために擬似要素を使うために

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

これはトリックがなければ本当に不可能です。これは、テキストをテキストのイメージで置き換えることによって機能する方法です。

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

この種のことは通常Javascriptで行われます。これがjQueryでどのようにできるかです：

$('.pvw-title').text('new text');
0
Nathan Manousos

これを機能させる方法は、CSSに行の高さを追加することです。これにより、ブロックは隠されたテキストの上に表示され、変更されたテキストは隠されません。

use before の例

.pvw-title span {
  display: none;
}

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