Псевдоклассы и псевдоэлементы — :hover и :before

Для начала думаю необходимо обозначить, что существуют псевдоклассы и псевдоэлементы. Первые это, например, псевдокласс  :checked, который применяется к элементам  checkbox и ratio, когда они находятся в выбранном состоянии.

Псевдоэлементы — элементы, которые мы можем визуально добавить на страницу. Если мы посмотрим в браузере на код страницы после добавления псевдоэлементов, то не увидим новых элементов. как таковых. Например, если css код будет такой

div:after {
    content: ""
}

то в коде страницы это будет выглядеть так:

<div>::after</div>

Впрочем, если щелкнуть по ::after, то можно просмотреть все его css стили как мы это делаем для любого другого элемента.

Добавить переключатель со своим стилем

Давайте рассмотрим конкретный пример. Наша цель — добавить переключатель со своим стилем.

В html коде следует обратить внимание на то, что у тега label присутствует атрибут for. Его значение должно соответствовать id чекбокса. В противном случае при клике по label , а так же по псевдоэлементу label  ничего не произойдет, так как между ними не будет связи.

Итак, мы прячем старый чекбокс с помощью стиля:

input {
    position: absolute;
    opacity: 0;
}

Затем добавляем псевдоэлемент перед label, который будет содержать стиль нашего нового переключателя:

input + label:before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 30px;
    height: 30px;
    background-image: url(http://www.front-nika.ru/wp-includes/images/checkbox.png);
}

И наконец мы прописываем стили для псевдокласса checked, которые будут актуальны в момент выбора переключателя:

input:checked + label:before {
    background-position: -30px 0;
}

Таким образом, при клике по псевдоэлементу label:before,  либо по самому элементу label у псевдоэлемента будет меняться свойство background-position. Тем самым будет показана другая часть картинки checkbox.png.

:hover и :before

Но что если нам понадобилось прописать стили при наведении мышки на кнопку переключателя? В таком случае мы задействуем псевдокласс :hover. Первая мысль может быть — написать так:

input + label:before:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

Но в таком случае тень у нас при наведении не появиться, так как у псевдолемента нет псевдокласса :hover.
Так что прописываем :hover для реального элемента label, для него же создаем псевдоэлемент с тенью:

input + label:hover:before {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

На этом все, но вопросы, замечания приветствуются!