CSS: почему в теге label, line-height влияет на сам label как контейнер, но не на его текстовую ноду?

Question

[MyQuestion]

Добрый день!

Я делаю кастомные чекбоксы, и я хотел, что бы они выравнивались, относительно высоты контейнера.

<li class="extra-options__item">
   <input class="input-checkbox extra-options__checkbox visually-hidden" type="checkbox" name="drinking-water" id="drinking-water">
   <label class="extra-options__label" for="drinking-water">
      Питьевая вода
   </label>
</li>

.extra-options__label {
  position: relative;
  cursor: pointer;
}

.extra-options__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #CDCDCD;
  cursor: pointer;
}
.extra-options__label {
  min-height: 30px;
  padding-left: 47px;
  text-transform: uppercase;
  font-size: 18px;
  line-height: 30px;
}

https://jsfiddle.net/12moj5pn/4/

Я пытаюсь задать line-height, на label, высота label увеличивается, а текст внутри label, занимает дефолтную высоту. Получается, псевдо элемент, отталкивается от верхнего левого угла текста. Но если бы высота строки, влияла на текст, то высота текста, была бы равна высоте контейнера, и псевдо элемент, правильно расположился бы относительно контейнера.

Я конечно сейчас задам position: relative на li, и всё будет работать. Или дам span для текста в dom и смогу обращаться непосредственно к текстовой ноде и её высоте. Но почему label такой кривой? Или я такой ...?) Может, это как-то более правильно можно сделать?

Comments

[Виталий Першин]

Я ничего не понял, чего вы хотите добиться в итоге?

[MyQuestion]

Виталий Першин, посмотрите в https://jsfiddle.net/12moj5pn/4/ через девтулз. Увидите, что line-height, который должен регулировать высоту строки текста, высоту текста не регулирует. Но он регулирует высоту содержимого label. Через девтулз видно, что высота текста 24, а мне нужно 30. А высота контейнера как раз таки 30. Если я дам line-height на p вместо label, то всё будет работать нормально. Так, как я ожидаю. Высота строки текста станет 30, а не 24.

[Ankhena]

Может, это как-то более правильно можно сделать?

Можно

Можно перестать использовать абсолют чтобы поставить рядом 2 элемента.
Гриды или флексы прекрасно справляются с этой задачей.
И дальше используйте их выравнивание.

[MyQuestion]

Ankhena, Спасибо!
Это действительно хорошее решение ))
Я на мгновение подумал в эту сторону, что бы с помощью флекса выровнять по вертикали, но посчитал избыточным...
Если честно, немного в шоке был, от такого взгляда и сразу не воспринял всерьёз. Как-то привык думать, что псевдоэлементы, это всегда absolute позиционирование...
Как всегда умеете удивить ))

[Ankhena]

MyQuestion, у флексов с гридами в такой ситуации может быть проблема, если в тексте есть br или какие-то еще другие теги. Тогда автоматически сформируется больше "ячеек" и чтобы это предотвратить нужно оборачивать весь текст в общий span. И только потом делать наложение элементов гридами или возвращаться к абсолютам.
Но пока там чистый текст, флексы и гриды очень хороши.