Пользовательский флажок CSS и выравнивание галочки на нескольких строках

Question

Я создал пользовательский флажок, используя псевдоэлементы :before и :after для <span>, который отлично работает на отдельных строках, но этот флажок нависает над полем, когда в тексте более одной строкиего <span>.

Я пытался использовать относительные значения для позиционирования, но ничего не помогло.

<ul class="calendar-filter-menu-cont">
  <li>
    <label>
      <input type="checkbox">
      <span>One line</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the second item in the list</span>
    </label>
  </li>

  <li>
    <label>
      <input type="checkbox">
      <span>This is the third item in the list</span>
    </label>
  </li>
</ul>


ul.calendar-filter-menu-cont {
  color: black;
  column-count: 3;
  max-width: 500px;
}
ul.calendar-filter-menu-cont > li {
  break-inside: avoid-column;
}
ul.calendar-filter-menu-cont > li label {
  display: flex;
  position: relative;
}
ul.calendar-filter-menu-cont > li label:not(:last-child) {
  margin-bottom: 10px;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] {
  margin-right: 1em;
  opacity: 0;
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"] + span:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border: 1px solid #979797;
  width: .8em;
  height: .8em;
  background-color: #f3f3f3;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}
ul.calendar-filter-menu-cont > li label input[type="checkbox"]:checked + span:after {
  content: '';
  position: absolute;
  top: .7ex;
  left: .35ex;
  width: .9ex;
  height: .45ex;
  background: rgba(0, 0, 0, 0);
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

Демонстрация: https://codepen.io/anon/pen/PVGxBz

Answer 1

Так что проблема в том, что ваши :before и :after не выровнены с одинаковыми свойствами.:before отцентрировано по вертикали, а :after выровнено по верху.

Если вы хотите установить флажок по центру на поле ввода, например:

Вы должны центрировать свою галочку следующим образом:

ul.calendar-filter-menu-cont > li label input[type="checkbox"]:checked + span:after {
  content: '';
  position: absolute;
  top: .7ex;
  left: .35ex;
  width: .9ex;
  height: .45ex;
  background: rgba(0, 0, 0, 0);
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  top: calc(50% - 1px); // Addition
  transform: translateY(-50%) rotate(-45deg); // Change
}

Изменения включают добавление свойства top и добавление значения translateY к transform

* 1021.* Если вы хотите, чтобы верхняя часть флажка была выровнена с вводом следующим образом:

Просто удалите transform и измените свойство topк статическому значению как таковому:

ul.calendar-filter-menu-cont > li label input[type="checkbox"] + span:before {
  content: '';
  display: inline-block;
  position: absolute;
  top: .3ex; // Change
  left: 0;
  /* transform: translateY(-50%); */ // Remove
  border: 1px solid #979797;
  width: .8em;
  height: .8em;
  background-color: #f3f3f3;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.2);
}