CSS | filterプロパティは子要素、疑似要素で解除はできない
CSSのfilterプロパティは、CSS要素だけでなく画像やSVG、その透過部分を反映してフィルター効果を付けることができる優れものです。
用途の多いフィルターとして「drop-shadow」があります。
filter: drop-shadow(水平方向の距離 垂直方向の距離 影をぼかす大きさ 色);記述例
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));CSSで円を作成した要素にfilterプロパティの「drop-shadow」を追加すると以下のようになります。
See the Pen CSS filter: drop-shadow() by yochans (@yochans) on CodePen.
filterプロパティは子要素、疑似要素で解除はできない
CSSのデザイン要素に子要素や疑似要素を含めた場合には注意が必要です。
親要素にfilterプロパティを追加した場合、当然ながら子要素・疑似要素にも追加したfilterプロパティは反映されますが、子要素・疑似要素ではその反映を解除、上書きすることができません（重ねがけは可能）。
疑似要素を追加した親要素にfilterプロパティを付けてみます。
See the Pen CSS filter: drop-shadow() 2 by yochans (@yochans) on CodePen.
疑似要素に対してもfilterプロパティが反映しています。
また、疑似要素を含めた要素に対して、filterプロパティが反映される為、疑似要素と重なっている部分には影が付いていないことがわかります。
例えば、サンプルのCSSの疑似要素に（予定する）背景色を付けて三日月を表現したい場合、filterの影が解除・上書きできないので以下の様になってしまいます。
See the Pen CSS Release of filter 3 by yochans (@yochans) on CodePen.
このサンプルでは疑似要素に「filter: none;」を指定していますが、解除できていません。
filterプロパティが子要素、疑似要素において解除できない理由は、その要素、文字や画像も含め、filterプロパティを適用するとWebページのレンダリングにおいてスタックコンテキストという状態に変換しているから、とかみたいです。
解決策
ひとつの要素に整理してCSSを記述したいところですが、疑似要素ではなく別々の要素に別けて記述する方法があります。
三日月を表現しようとすると、それだけでは影が変になりますが・・・
See the Pen CSS Release of filter 4 by yochans (@yochans) on CodePen.
:hoverはfilterプロパティの解除が可能
また、マウスホバー時に使う:hoverについては「filter: none;」でのfilterプロパティの解除が可能です。
See the Pen CSS Release of filter（ :hover） by yochans (@yochans) on CodePen.
マウスホバー時にフィルターのshadowが解除されていることが確認できます。