![](https://ownmono.com/blog/wp-content/uploads/2024/03/hashibi_right-150x150.webp)
擬似要素のbefore・afterを非表示にしたいっす!
![](https://ownmono.com/blog/wp-content/uploads/2024/03/capy_left-150x150.webp)
![](https://ownmono.com/blog/wp-content/uploads/2024/03/capy_left-150x150.webp)
![](https://ownmono.com/blog/wp-content/uploads/2024/03/capy_left-150x150.webp)
簡単なCSSで非表示になるから紹介しよう。
WordPressのテーマなどのテンプレート利用時に、デザインとして擬似要素が使われていることがある。根本的に改修でも解決できるが一部だけ非表示にしたいのならCSSが簡単でおすすめだ。
目次
擬似要素を打ち消す方法
.class::before {
content: none;
}
afterの場合は、before部分を書き換えるだけでOK。
重要なのはcontent: none;
ということ。display:none;
ではないので注意しよう。
まとめ:擬似要素before・afterを非表示する方法
擬似要素before・afterを非表示にしたいという要望が意外に多い。
0から制作するWebサイトであれば、設計時に対応もできます。ですが、WordPressやECサイトのテンプレートを利用する際には、根本を改修するよりもCSSで対応した方が管理しやすい。
テンプレート利用時には使う可能性があるので、ぜひブックマークを。
擬似要素before・afterを非表示する方法
- CSS
content: none;
で非表示にできる
コメント(承認制)