ec-cube CSSでタグ内のテキストを書き換えよう

WordPressのプラグインやメールフォームの使用時、
「こういう表記にしたいけど、HTMLで変えられないんだよな」ってことありませんか?
HTMLで変えられないなら、CSSでやっちゃえばいいじゃない。

というわけで、今回は「CSSでタグ内のテキストを書き換える方法」をご紹介します。

書き換えたい部分を疑似要素で書き換える
HTML
<p class="login-username">
 <label for="user_login">ユーザー名またはメールアドレス</label>
 <input type="text" name="log" id="user_login" class="input" value="" size="20" />
</p>

WordPressのログインフォームを使用すると、こんな感じになると思います。
このままだとラベルの部分が長くて、レイアウトが変になってしまうこともあります。

そこで、ラベルの要素のフォントサイズを0にして、
:beforeで表示したいテキストとテキストサイズを指定します。

CSS
.login-username label{
	font-size:0;
}

.login-username label:before{
	font-size: 12px;
	content:"ユーザー名";
}
RESULT

HTML側から変更できない場合に便利です。
ぜひお試しください!