Written by Kasumi

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

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

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

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

font-sizeを調整しよう

p {font-size: 0;}

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

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

以上で解決です。

まとめ

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

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

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

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

目次

関連記事

HTMLCSS プログラミング

【簡単】checkbox(チェックボックス)のデザインをカスタマイズする方法【CSS】

2022.02.20
29138
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
5724
HTMLCSS

【簡単】CSSで点線・破線の間隔を空ける方法

2022.10.01
2296
プログラミング

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

2021.01.05
5173