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側から変更できない場合に便利です。
ぜひお試しください!