Как отцентрировать псевдоэлемент

Рейтинг: 0Ответов: 1Опубликовано: 18.07.2023

Всем привет. Столкнулся с незадачей. Создал кастомный input radio и не могу понять почему у меня центральный круг (псевдоэл.) у первого спана Винтер находится не посередине, когда на остальных элементах все посередине. И еще, когда меняю ширину экрана (гугл хром), все круги вообще меняют свое расположение.

.favorites__inputs {
  display: flex;
  column-gap: 87px;
}

label {
  display: inline-flex;
  gap: 9px;
  align-items: end;
  padding: 0 0 0 5px;
}

.favorites__subtitle {
  color: #000;
  text-align: start;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 35px;
}

.custom__input {
  display: none;
}

.check__style {
  display: inline-block;
  position: relative;
  width: 17px;
  height: 17px;
  margin: 5px 5px 5px -5px;
  border-radius: 50%;
  border: 2px solid var(--second-color);
}

.check__style::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  background: var(--second-color);
  border-radius: 50%;
  opacity: 0;
  transition: 0.2s;
  top: 6.875px;
  left: 6.5px;
  transform: matrix(1, 0, 0, 1, -3.99, -3.22);
  opacity: 0;
  font-weight: 700;
}

.text__input {
  position: relative;
  // padding: 0 90px 0 40px;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  padding: 5px;
}

.custom__input:checked+.check__style::before {
  opacity: 1;
}

.custom__input:checked~.text__input {
  font-weight: 700;
}
<div class="favorites__inputs">
  <label>
    <input type="radio" name="num1" class="custom__input" checked >
    <span class="check__style"></span>
    <span class="text__input">Winter</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Spring</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Summer</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Autumn</span>
  </label>
</div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Удалите у .check__style::before свойство transform: matrix и добавьте следующие стили:

.check__style::before {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

Демо:

.favorites__inputs {
  display: flex;
  column-gap: 87px;
}

label {
  display: inline-flex;
  gap: 9px;
  align-items: end;
  padding: 0 0 0 5px;
}

.favorites__subtitle {
  color: #000;
  text-align: start;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 35px;
}

.custom__input {
  display: none;
}

.check__style {
  display: inline-block;
  position: relative;
  width: 17px;
  height: 17px;
  margin: 5px 5px 5px -5px;
  border-radius: 50%;
  border: 2px solid red;
}

.check__style::before {
  content: "";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  background: red;
  border-radius: 50%;
  opacity: 0;
  transition: 0.2s;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-weight: 700;
}

.text__input {
  position: relative;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 400;
  padding: 5px;
}

.custom__input:checked+.check__style::before {
  opacity: 1;
}

.custom__input:checked~.text__input {
  font-weight: 700;
}
<div class="favorites__inputs">
  <label>
    <input type="radio" name="num1" class="custom__input" checked >
    <span class="check__style"></span>
    <span class="text__input">Winter</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Spring</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Summer</span>
  </label>
  <label>
    <input type="radio" name="num1" class="custom__input">
    <span class="check__style"></span>
    <span class="text__input">Autumn</span>
  </label>
</div>