Как выровнять элемент ::before по центру?

Question

Хочу сделать кастомный checkbox и использовать символ "✔" в качестве галочки.

Прошу подсказать, насколько реально и грамотно реализовывать подобным образом?

На данный момент, при checked все сдвигается. Если я делаю inline-flex, то контейнеры начинают бегать.

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: #f5f5f5;
  margin: 1rem 2rem;
}

h3 {
  text-transform: capitalize;
}

ul {
  list-style-type: none;
  margin: 1rem 0;
}

li {
  margin: 0;
  padding: 1rem 1rem;
}

li:nth-child(odd) {
  background-color: #a5ccda;
}

li:nth-child(even) {
  background-color: #add8e6;
}

span {
  margin: 1rem;
}

li.checked {
  background-color: #e2e2e2;
}

li.checked span {
  text-decoration: line-through;
}

mark {
  background-color: transparent;
  color: red;
  cursor: pointer;
}

ul.success {
  list-style-type: none;
  margin: 1rem 0;
}

ul.success li {
  margin: 0;
  padding: 1rem 0;
}

label {
  margin: 0 1rem;
  cursor: pointer;
}

ul.success li:has(input:checked) {
  background-color: #e2e2e2;
}

ul.success li:has(input:checked) label {
  text-decoration: line-through;
}

.custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox+label::before {
  content: '';
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 2px solid #222;
  border-radius: 0.1em;
  margin-right: 0.5em;
}

.custom-checkbox:checked+label::before {
  content: '✔';
}

<h3>my to do list</h3>

<ul class="success">
  <li><input class="custom-checkbox" type="checkbox" name="task-1" id="t1"> <label for="t1">Hit the gym</label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-2" id="t2"> <label for="t2">Pay bills</label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-3" id="t3"> <label for="t3">Meet John</label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-4" id="t4"> <label for="t4"> Buy eggs</label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-5" id="t5"> <label for="t5"> Read a book </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-6" id="t6"> <label for="t6"> Organize office </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-7" id="t7"> <label for="t7"> Eat dinner </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-8" id="t8"> <label for="t8"> Buy apples </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-9" id="t9"> <label for="t9"> Meet George </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-10" id="t10"> <label for="t10"> Feed the cat </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-11" id="t11"> <label for="t11"> Write a letter </label> <mark> × </mark> </li>
  <li><input class="custom-checkbox" type="checkbox" name="task-12" id="t12"> <label for="t12"> Run 1 km </label> <mark> × </mark> </li>
</ul>

некоторые моменты по типу mark и подобного чисто поиграться. До JavaScript пока не дошел и захотел реализовать просто отметку и попрактиковаться с самими checkbox.

Пробовал также inline-flex, в таком случае галочка и рамка не выезжают друг за друга, но начинают бегать. Если вставить любой символ в content, то все выравнивается как надо, но мне нужен пустой checkbox при unckecked.

.custom-checkbox+label::before {
  content: '';
  display: inline-flex;
  align-items: center;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  flex-grow: 0;
  border: 2px solid #222;
  border-radius: 0.1em;
  margin-right: 0.5em;
}

Запутался в данной ситуации и прошу подсказать, как правильно можно реализовать мою задумку. Все, что пока понял: когда content='', то центрируется по верхней рамке ::before.

Answer 1

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

* {
  margin: 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: #f5f5f5;
  margin: 1rem 2rem;
}

h3 {
  text-transform: capitalize;
}

ul {
  list-style-type: none;
  margin: 1rem 0;
}

ul.success {
  list-style-type: none;
  margin: 1rem 0;
}

li {
  margin: 0;
  padding: 1rem 1rem;
}

li:nth-child(odd) {
  background-color: #a5ccda;
}

li:nth-child(even) {
  background-color: #add8e6;
}

li.checked {
  background-color: #e2e2e2;
}

ul.success li {
  margin: 0;
  padding: 1rem 0;
}

ul.success li:has(input:checked) {
  background-color: #e2e2e2;
}

ul.success li:has(input:checked) label {
  text-decoration: line-through;
}

label {
  position: relative;
  margin: 0 1rem;
  cursor: pointer;
}

mark {
  background-color: transparent;
  color: red;
  cursor: pointer;
}

.custom-checkbox {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.custom-checkbox+label::before {
  content: "\00a0";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  line-height: 0.75rem;
  border: 2px solid #222;
  border-radius: 0.1em;
  margin-right: 0.5em;
}

.custom-checkbox:checked+label::before {
  content: "✔";
}

<h3>my to do list</h3>
<ul class="success">
  <li><input class="custom-checkbox" type="checkbox" name="task-1" id="t1"><label for="t1">Hit the gym</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-2" id="t2"><label for="t2">Pay bills</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-3" id="t3"><label for="t3">Meet John</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-4" id="t4"><label for="t4">Buy eggs</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-5" id="t5"><label for="t5">Read a book</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-6" id="t6"><label for="t6">Organize office</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-7" id="t7"><label for="t7">Eat dinner</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-8" id="t8"><label for="t8">Buy apples</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-9" id="t9"><label for="t9">Meet George</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-10" id="t10"><label for="t10">Feed the cat</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-11" id="t11"><label for="t11">Write a letter</label><mark>×</mark></li>
  <li><input class="custom-checkbox" type="checkbox" name="task-12" id="t12"><label for="t12">Run 1 km</label><mark>×</mark></li>
</ul>

БЛОГ НА HUSL

Как выровнять элемент ::before по центру?

Ответы (1 шт):