テキストをCSSに置き換えるにはどうすればよいですか？

321

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

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

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

[ ]それを機能させるために使用する必要があります。

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

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

css  text  replace 
— MokiTa
ソース
正直に言うと、これにはJavaScriptを使用するのが最善です。
— サー
JavaScriptを使用するには、DOMをロードする必要があるため、FOUCがあります。これを実行して、HTMLサーバー側を生成せずに FOUCを回避しながら、クエリ文字列から抽出されたコンテンツでテキストを置き換えます（これにより、HTMLを積極的にキャッシュしてCDNから提供できます）。
— nemequ 16
32
問題は、CSSでそれを行う方法です。私は CSSの変更のみを許可するCMSを使用しています。そのため、別のページではなく、回答を求めてこのページにアクセスしました。そのため、質問者の状況が変わらない理由を尋ねるのではなく、尋ねられた質問に答えます。
— felwithe 2017

回答:

291

または<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';
}
— マシュー・カチア
ソース
52
すばらしいですが、それはCSSだけでなくHTMLへの変更です。
— mikemaccana 2013年
22
時々それがあなたの唯一の選択肢
— locrizak
4
スパン{表示：なし。}は疑似要素も非表示にする必要があります。代わりに可視性を使用する必要があります：非表示
— xryl669
2
表示：なし。可視性：非表示。両方とも疑似要素を非表示にする
— Facundo Colombier
10
@Mathewはスパンを非表示にしていますが、疑似要素をdivに追加しているため、（可視性または表示プロパティを使用して）疑似要素を非表示にしないでください
— dewtea
249

必須：これはハックです：CSSはこれを行うには適切な場所ではありませんが、状況によっては-たとえば、CSSによってのみカスタマイズできるサードパーティライブラリがiframeにある場合-この種類のハックは唯一のオプションです。

CSSを使用してテキストを置き換えることができます。CSSを使用して、緑色のボタンを「こんにちは」で、「さようなら」という赤いボタンで置き換えてみましょう。

前：

ここに画像の説明を入力してください

後：

ここに画像の説明を入力してください

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

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

<button>Hello</button>

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

次に、元の要素を非表示にしますが、後で別のブロック要素を追加します。

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

注意：

  • これをブロック要素として明示的にマークする必要があります。「後」の要素はデフォルトでインラインです
  • 疑似要素の位置を調整して、元の要素を補正する必要があります。
  • 元の要素を非表示にし、を使用して疑似要素を表示する必要がありvisibilityます。display: none元の要素に関するメモは機能しません。
— ミケマッカナ
ソース
2
これはie 10では機能しません。変更する方法はありますか？
— Solmead 2013
49
display: none;::after誰かが気になった場合に備えて、「この要素の内部ではあるが、最後に」を意味するため、機能しません。
— Ry-
4
残念ながら、「変更」ボタンはボタンのように機能しなくなりました。これは良い例ですが、ボタンには適用されません。
— xryl669 2014
1
表示：なし。可視性：非表示。両方とも疑似要素を非表示にする
— Facundo Colombier
これを行うと、要素が置き換えられますが、テキストがすべて大文字で小文字に変更できないのはなぜですか？
— Jpaji Rajnish
159

疑似要素を使用してコンテンツを挿入する場合は、次の操作を実行できます。それは元の要素の知識を想定しておらず、追加のマークアップを必要としません。

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

— ジェームズファンダイク
ソース
1
この回答は、<th>要素内のテキストノードなど、他の多くの回答では対応できない場所で機能します。
— Chris Kerekes 2014
5
これはうまくいきます。私の場合、line-height: 0およびcolor: transparent主要な要素に擬似にそれらの値をリセットする仕事（なしをいじるんtext-indent）
— dontGoPlastic
1
line-height: normal代わりにすべきではないinitialですか？
— ベンジャミン
1
text-indentを使用する理由は、元のテキストが長い場合、要素は古いテキストのサイズのままで、新しいテキストのサイズに縮小されないためです（それがあなたの望むものであると想定しています）
— Chris Janssen
テキストインデント：-9999px; IEで動作します。一方、可視性：非表示。メソッドはIEでは機能しません。
— トムステルミッツ
57

mikemaccanaの答えに基づいて 、これは私のために働いた

button {
  position: absolute;
  visibility: hidden;
}

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

§絶対配置

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

— スティーブン・ペニー
ソース
2
私にとってこの回答は、同じ行内のテキスト置換で機能するため、他のものより優れていました。つまり、（HTMLとCSSの特定の組み合わせの場合）テキストの改行を強制しません。
— PGR
30

これはシンプルで短く、効果的です。追加の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 */
    }

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;
}
— ホークアイ126
ソース
22

できません、まあ、できます。 

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

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

しかし、多かれ少なかれできるが、そうすべきではない。実際のコンテンツはドキュメントに含める必要があります。contentプロパティは、引用符で囲まれて表示されるテキストを囲む引用符など、主に小さなマークアップを対象としています。

— GolezTrol
ソース
コードを使用してテキストをそのメソッドの種類に置き換えたことは間違いありません。 '<div class = "pvw-title">事実</ div> <div class = "pvw-title">事実</ div> '：afterは使用できません。同じ名前のdivクラスが複数ありました:(
— MokiTa
ブラウザの互換性はどの程度ですか？そして、私は、この種の柔軟性のために、javascriptが長期的にはより良い選択になると思います。
— サー
最新のブラウザはそれをサポートしています。古いIEのバージョンについてはわかりませんが、quirksmode.comで検索できると思います。
— GolezTrol
15

: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. と :before

    大画面xxx

    大画面

  2. と :after

    xxxbig screen

    大画面

— ライブラブ
ソース
11

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

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

jsfiddleのデモと例

それは質問に完全に答えるわけではないかもしれませんが、それは私のニーズと多分他のものも満足しました。

— ロベンデビエン
ソース
9

これはインラインテキストで私のために働きました。Firefox、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;
}
— ノエル・ウィリアムス
ソース
2
上：それによる〜11少なくともIE 9で私のために仕事は「目に見える可視性」：無視していません：要素の後stackoverflow.com/questions/17530947/...
— thenickdude
8

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

.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!';
}
— ピートOK
ソース
3
これは、スクリーンリーダーを使用するユーザーにとっては問題です。要素のdisaply / visibilityを変更せず、ariaヒントを提供しない場合、「非表示」テキストはスクリーンリーダーで読み上げられる可能性があります。
— 目立つコンパイラ
8

疑似要素と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.";
}
— アーサンアフタブ
ソース
3

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

#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;
}
— ヴィン
ソース
2

これにより、チェックボックスがボタンとして実装され、「チェック」状態に応じて「はい」または「いいえ」が表示されます。したがって、コードを記述せずに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

他のすべての答えで見られるものとは異なり、タグのコンテンツを画像で置き換えるために疑似要素を使用する必要はありません

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

    div.pvw-title { /* No :after or :before required */
        content: url("your URL here");
    }
— エステッカ
ソース
2
CSS2以降contentでは、:beforeおよびにのみ適用され:afterます。CSS3はそれをすべてに拡張しますが、生成されたコンテンツモジュールはまだドラフトステータスであるため、使用はブラウザーに依存する可能性が高くなります。
— mrec 2017
1
何が「地上子」は？ない「1.（ヨーロッパの列車制御システム）railwのレールの間に配置された電子ビーコンまたはトランスポンダ」、私は推測します。（ここではコメントではなく、質問を編集して返信してください。）
— Peter Mortensen
1

これはトリックなしでは実際には不可能です。これは、テキストをテキストの画像に置き換えることで機能する方法です。

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

この種のことは、通常JavaScriptで行われます。jQueryでこれを行う方法は次のとおりです。

$('.pvw-title').text('new text');
— ネイサン・マヌソス
ソース
3
私もJavascriptを使用できません：/
— MokiTa
1
これが私が機能する唯一の方法だと思います：.pvw-title span [style * = "color：＃000、font-size：14px;"] {visibility：hidden; } .pvw-title span [style * = "color：＃000; font-size：14px;"]：後{visibility：visible; 色：＃000; font-size：14px; 内容：「テスト」; }しかし、どちらも同じスタイルを使用しているため、それを行うことはできません..：/
— MokiTa
なぜあなたは色/フォントに基づいてそれを選択するのですか？
— Nathan Manousos、2011年
スタイル全体に基づいて選択してください。両方とも同じ「div」名を持つため、両方ではなく、その特定のタイトルを編集できます。
— MokiTa
1

リンクのテキストを置き換える必要があるという問題がありましたが、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
@AlmightWhyなぜこの解決策はマークアップを変更する必要があるため、これは反対票が投じられたのではないかと思っています。言い換えれば、OPにはCSSのみのソリューションが必要でした
— dannie.f 2018
1

画面の幅を小さくすると、「暗い」という単語が「D」だけに短縮される、このような解決策が見つかりました。基本的には、元のコンテンツのフォントサイズを0にし、疑似要素として短縮形を使用します。

この例では、代わりにホバー時に変更が発生します。

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>
スニペットを展開

— ステファンボブ
ソース
1

8年後、私はStylishを使用しようとするときに同じ課題に直面しましたブラウザー拡張機能を（私のものではなく）Webサイトの何かを変更。そして今回は「inspect element」を使ってソースコードを見て動作させ、それに基づいてCSSコードを作成しました。

これは以前は次のように見えました。

<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>
スニペットを展開

これは、スタイルの変更に使用したHTMLとCSSの一部です。

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>
スニペットを展開

上記のコードを実行すると、機能することがわかります（Chromeでテスト済み）。

これは、私がこの質問をしたときに私がやりたかったことです。

私はある種のコミュニティブログ/ Myspaceに似たものを使用していて、プロファイルのスタイルを設定するときに唯一持っていたのはCSSエディターでした。そのため、スタイルに基づいて選択しました。

私はここで答えを見つけました：

— MokiTa
ソース
0

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

beforeの使用例：

.pvw-title span {
  display: none;
}

.pvw-title:before {
  content: 'Whatever it is you want to add';
  line-height: 1.5em
}
— タルタルモン
ソース
0

まあ、多くの人が言ったように、これはハックです。ただし、flexboxandの利点を生かした、より最新のハックを追加したいrem、つまり

  • 変更するテキストを手動で配置したくないので、利用したいのはこのためです。 flexbox
  • を使用paddingしたくない、および/またはmarginテキストを明示的に使用したくない場合、pxデバイスやブラウザによって画面サイズが異なると、出力が異なる場合があります。

これが解決策です。簡単に言えflexboxば、自動的に完全にrem配置され、ピクセルのより標準化された（そして自動化された）代替手段です。

以下のコードを含むCodeSandboxとスクリーンショットの形式で出力します。コードの下を読んでくださいnote！

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

注：タグが異なるとrem、の異なる値が必要になる場合があります。これは正当化されておりh1、大画面でのみ使用できます。ただし、@mediaこれを使用すると、これをモバイルデバイスに簡単に拡張できます。

CSSを使用してHTMLテキストを置き換える方法のハック

— ダニエル・ダニエレキ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.