コンテンツを再構築中です。

CSS3: HTML のテキスト要素を CSS で書き換える

静的 HTML や動的に出力される HTML ソースを触らずに、テキストを書き換えたい場合、一般的には JavaScript で実現すると思います。
ただ、ちょっとしたテキスト変更に JavaScript を使いたくない場合、スタイルシートで簡単に書き換える方法がありますので、今回は CSS による方法を説明したいと思います。

目次

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で共有していただければ幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次