質問: 質問内容 ---- inputのrangeのつまみのデザインを変えたいのですが、`-webkit-slider-thumb`に`before`や`after`といった擬似要素が付与できません。 **ソースコード** ``` input[type="range"]::-webkit-slider-thumb { &::before { //反映されない } } ``` 非推奨であることは承知ですが、方法はないでしょうか。また、その代替案があれば教えてください。
回答: Selectors Level 3 によれば、 **1 つの選択子には 1 つの疑似要素**が許可されます[1]。同様の問題は crbug にて WontFixとなっており、今後修正される可能性は低いと考えられます。さらに、 `input` 要素では `::before`, `::after` 要素が使用出来ない可能性があります[2]。 > > 7. Pseudo-elements[1] > --------------------------------------------------------------------------- > > > Only one pseudo-element may appear per selector, and if present it must appear after the sequence of simple selectors that represents the subjects of the selector. > > > 既に使用出来なくなってから数年が経過している非標準機能なので、 `::-webkit-slider-thumb` 疑似要素での `::before`, `::after` 疑似要素が、どのような装飾の実現に用いるものかを把握しきれていませんが、もしその装飾がつまみの前後の線への装飾であった場合は、 `::webkit-slider-runnable-track` 疑似要素や `linear-gradient` 関数を用いることが出来るのではないかと思います。