静的 HTML や動的に出力される HTML ソースを触らずに、テキストを書き換えたい場合、一般的には JavaScript で実現すると思います。
ただ、ちょっとしたテキスト変更に JavaScript を使いたくない場合、スタイルシートで簡単に書き換える方法がありますので、今回は CSS による方法を説明したいと思います。
INDEX
HTML のテキスト要素を CSS で書き換える
ここでは a タグに button クラスが割り当てられていて、テキストが「ボタン」である場合を例に説明します。
HTML
[code] ボタン [/code]button クラスの font-size を 0 にすることで元テキストの「ボタン」を見えなくし、その後 before 要素で「サンプル」というテキストを追加します。このとき、フォントサイズは元のサイズ（ここでは 1rem）に戻すようにしてください。
CSS
[code] .button { font-size: 0; } .button:before { font-size: 1rem; content: ‘サンプル’; } [/code]まとめ
外部から出力されたコードの文字を翻訳したり、ちょっとした表現を変えたい場合にオススメの方法です。
ガッツリと書き換える必要がある場合は、メンテナンス性の問題もあるため JavaScript を使用した方がいいと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
