【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法
自動生成される要素内のテキストをCSSのdisplay: none;で要素事消すのではなく、タグ内のテキストだけ見た目上消す方法はないか？
このような悩みを解決します。
本記事では、タグ内のテキストを display: none; を使わず消す方法について解説します。
font-sizeを調整しよう
p {font-size: 0;}
テキストのみ、見た目上消す方法はfont-sizeプロパティを指定し、値を0にすればOK。
これだけで要素事消さず、テキストのみ見た目上消す事ができます。
以上で解決です。
まとめ
単純にタグ内のテキストを消せば良い話ですが、自動生成されてるものだと厄介。
疑似要素のbefore要素、after要素を使っていて、テキストだけ消したい時に便利です。
display: none;を使ってしまうと疑似要素も消えてしまうので、font-size: 0;を使いましょう。
以上で解説を終わります。
目次
