css - CSS を使用してテキストを置換または変更する方法

Question

CSS を使用して「ブックマーク」を「リンク」に置き換えるにはどうすればよいですか?

<div class="lfr-panel-title"> 
  <span> Bookmarks </span> 
</div>

CSS がこれを意図したものではないことは知っていますが、クロスブラウザーの方法はありますか?

score 30 · Accepted Answer

このようなクレイジーなことをすることができます。

.lfr-panel-title span{
   display:none;
}

.lfr-panel-title:after{
   content: "links";   
}

しかし、誰もが指摘するように..お勧めしません。

score 6 · Accepted Answer

CSS は、正確なテキストを変更または置換しません。

これを実現するには、ある種のクライアント側言語 (JavaScript、jQuery など) またはサーバー側言語 (php、ASP.NET など) を使用する必要があります。

@Loktar が述べているように、疑似セレクターとを介してその機能を模倣できます。:before:after

ただし、その使用はお勧めできません。また、IE を考慮すると、クロスブラウザーとの完全な互換性はありません。QuirksModeを介してクロスブラウザー互換性チャートを見てください。

:before :after クロスブラウザーチャート

score 0 · Accepted Answer

短い答え：いいえ。

長い答え: CSS は、コンテンツを操作することを意図していないか、または非常に機能していません。背景画像を使用してテキストを置き換えることはできますが、これはあまりアクセスしにくいものです。さまざまな :after または :before 手法も、ブラウザー間の互換性があまり高くありません。

この方法でコンテンツを操作するには、javascript が必要です。

3 に答える 3