Передёргивание страницы на чекинг радио инпут

[seemax]

1)  "Стар рейтинг" 

работает как задумано, только страница перёдёргивается. Решение вопроса через preventDefault() 

const labels = document.querySelectorAll('label');
function noDefault(e){
  e.preventDefault();
 };

labels.forEach(x => x.addEventListener('click', noDefault));

несостоятельно, т как инпуты перестают переключаться на "чекед".

2) Связанный с этим второй вопрос второго примера. Страница не передёргивается, чекится как надо. Только не работает в ИЕ, т как он не прощает :before применительно <input>, который не является блочным элементом. Первому варианту предпочтение, но оба примера применяют псевдоэлементы. Если нет лучшего решения, чем применить :before, как выставить текст по вертикали в псевдоэлементе второго примера 

 

"vertical-align: middle;
      display: block; "  не решают проблему.

 

[seemax]

Решение первого вопроса:

&:not(:checked) {

> input {

display: none;

//position: absolute;

//top: -9999px;

clip: rect(0,0,0,0); }

Пока не найден ответ на вертикальное позиционирование текста в псевдоэлементе...

[mrnobody]

Если высота не будет меняться, то можно добавить line-height: 40px;

 

[AlexZaw]

без псевдо элементов через label https://jsfiddle.net/AlexZaw/u8x02eLr/