_ [Web]CSS での処理は難しい・・・・

デバッグし辛いのと、理解が浅いのと（汗）

radio ボタン でスライドスイッチもどきを作ってみた.

先人の知恵、ありがたや.

html 部分は簡単.

<input type="radio" id="xxx"> に続いて <label for="xxx" data-label="...."> を設定し、input を非表示にしておく.

肝心の css だが

label を position : static として float : left, width : 50% で並べる.（ベース部分）

label::before を position : absolute, content : attr(data-label) しておく.（選択時の文字表示用）

label::after も position : absolute で background を設定し、 trasition : all 200ms とエフェクト具合も指定.

あとは after の表示位置を checked 指定を多用して指示してやる・・・・・といった具合.

after 部分が選択側に移動して「スライドスイッチ」のように見える！ before が無いと ベース部分が after に覆われて何も見えない（笑）

html部分は単純なので、一度作ると気軽に多用できるのがいいナ！