Как выровнять тест?

Question

[by_ultra]

Привет всем.
Может кто-то сможет подсказать, как выровнять тест при стилизованном checkbox?
Бьюсь не один час и не могу найти решение, буду благодарен за помощь.
Задача сделать так :



Вышло так:



Код:

<div class="personal-data__item">
                        <input class="personal-data__input" type="checkbox" checked id="personal-data">
                        <label class="personal-data__label" for="personal-data">Я даю согласие на <a
                                class="personal-data__link" href="#">обработку своих
                           персональных данных</a> в соответствии со
                           статьей 9 Федерального закона от 27 июля 2006 г. N 152-ФЗ «О персональных данных»
                        </label>
                     </div>

.personal-data__label{
  font-size: 12px;
  line-height: 18px;
  color: #999999;
  cursor: pointer;

}

.personal-data__link{
  color:  #FF0000;
  text-decoration: underline;
}

.personal-data__input[type=checkbox] {
  display: none;
}

.personal-data__label::before{
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border: 1px solid #DFDFDF;
  margin-right: 5px;
  vertical-align: top;
}

.personal-data__input[type=checkbox]:checked + .personal-data__label::before{
  border: 1px solid  #FE0400;
  background-image: url(../images/check.svg);
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}

Может кто-то подскажет более креативный подход в стилизации checkbox, чем-тот который нагуглил я ?)

Comments

[Ankhena]

Вопрос не имеет отношения к чекбоксам.

Если бы текст не содержал ссылки, то решалось бы обычным флексом или гридом.

Но, поскольку внутри текста есть еще теги, то вариантов несколько:
- обернуть текст в span и использовать флексы или гриды
- позиционировать псевдо абсолютом
- и дурацкий вариант: заменить псевдо на фон у лейбла (3 квадратика градиентами) и задать лейблу паддинг соответствующего размера.

В случае использования псевдо svg не нужно. Квадратики неплохо рисуются на css.
Единственный минус - если есть шанс, что кто-то захочет поменять вид чекбокса, не меняя всего остального дизайна сайта.

Answer 1

[Rsa97]

Например, так: