CSSを使ってテキストを置き換える方法

読了目安時間は約 2 分です。

WordPressで、カスタマイザーでは変更できないテキストに対して「変更してほしい」とクライアント様からご要望があり、CSSで簡単に対応したときのことを備忘録的にまとめます。

CSSだけでテキストを書き換えることはできないかな？と思ってやってみました。コーディングはCSSだけ！という方にはオススメです。

「サンプル」という文字を「さんぷる」に置き換えてみます。

HTML

<div class="sample">
<p> サンプル </p>
</div>

CSS

.sample p{
display:none;
}
.sample:before{
content: "さんぷる";
}​

p{display:none;}で置換前のテキストを消してしまい、:before{content:"○○○";}​で置換したテキストを表示させます。

少々強引ですが、カンタンにテキストを変更したい場合に使ってみてください。