【簡単】CSSを使って要素を非表示にせず、要素内のテキストだけ見た目上消す方法

自動生成される要素内のテキストをCSSのdisplay: none;で要素事消すのではなく、タグ内のテキストだけ見た目上消す方法はないか?

このような悩みを解決します。

本記事では、タグ内のテキストを display: none; を使わず消す方法について解説します。

font-sizeを調整しよう

p {font-size: 0;}

テキストのみ、見た目上消す方法はfont-sizeプロパティを指定し、値を0にすればOK。

これだけで要素事消さず、テキストのみ見た目上消す事ができます。

以上で解決です。

まとめ

単純にタグ内のテキストを消せば良い話ですが、自動生成されてるものだと厄介。

疑似要素のbefore要素、after要素を使っていて、テキストだけ消したい時に便利です。

display: none;を使ってしまうと疑似要素も消えてしまうので、font-size: 0;を使いましょう。

以上で解説を終わります。

Ads

関連記事

プログラミング

埋め込み型のフォームメーラーで文字化けしてしまう場合の対処方法

2021.01.05
269
JavaScript プログラミング

タブ切り替えでタブを上下に二つ設置し、連動させる方法

2021.01.06
252
HTMLCSS プログラミング

CSSで画像の高さを一律にそろえる方法【結論:object-fitを使えば簡単です】

更新日:2021.01.08
966
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
34