【CSS】擬似要素before・afterを非表示する方法

ハシビィくん

擬似要素のbefore・afterを非表示にしたいっす！

カピーさん

簡単なCSSで非表示になるから紹介しよう。

WordPressのテーマなどのテンプレート利用時に、デザインとして擬似要素が使われていることがある。根本的に改修でも解決できるが一部だけ非表示にしたいのならCSSが簡単でおすすめだ。

擬似要素を打ち消す方法

.class::before {
    content: none;
}

afterの場合は、before部分を書き換えるだけでOK。

重要なのはcontent: none;ということ。display:none;ではないので注意しよう。

まとめ：擬似要素before・afterを非表示する方法

擬似要素before・afterを非表示にしたいという要望が意外に多い。

0から制作するWebサイトであれば、設計時に対応もできます。ですが、WordPressやECサイトのテンプレートを利用する際には、根本を改修するよりもCSSで対応した方が管理しやすい。

テンプレート利用時には使う可能性があるので、ぜひブックマークを。