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;を使いましょう。

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

目次

関連記事

プログラミング

Visual Studio Code(VSコード)でスニペットを登録するやり方【効率アップ】

更新日:2020.06.12
232
WordPress プログラミング

カテゴリーページパーマリンクからcategoryを削除した際のページネーション不具合を修正

更新日:2021.10.26
584
WordPress プログラミング

【簡単】is_pageで固定ページを複数指定し、条件分岐する方法【配列arrayを使おう】

2022.03.18
880
WordPress プログラミング

【BreadcrumbNavXT】パンくずをJSONLD形式構造化で表示する方法

2022.01.02
379