Во-первых, никакой flex не работает на элементах с position: absolute - с точки зрения остальных объектов на странице таких элементов не существует, они исключаются из сетки.
Во-вторых, чтобы ваш checkbox находился слева от текста - заметьте, от текста label, а не input[type=checkbox]! - их нужно обернуть в единый блок. Тогда не придется загоняться на position: absolute, он и так встанет слева, если у этого единого блока будет свойство display: flex, или display:block, а у input будет float: left.
В-третьих, зачем создавать два псевдоэлемента before и after, да к тому же с одинаковыми значениями при отмеченном checkbox и неотмеченном??? Да еще и вешать opacity??? Прямо скажем, криво.
А теперь немного кода:
<div class="my-checkbox">
<input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
<div class="checked"></div> <!-- место для чекбокса-->
<div> <!-- еще один контейнер, чтобы можно было выровнять по центру --->
<label for="formAgreement" class="form_label">
<span>Я принимаю условия конфиденциальности</span>
</label>
</div>
</div>
И css:
.form_label span {
font-size: 15px;
position: relative; /*придаем блоку свойство для создания возможности позиционирования в блоке*/
}
.checkbox_input {
position: absolute;
left: -999999px; /*прячем чекбокс за пределы видимости*/
}
label {
text-decoration: underline;
color: red;
cursor: pointer; /*чтобы все поняли, что сюда нужно нажимать*/
}
.checked { /*квадратик для галочки*/
width: 16px;
height: 16px;
border: 1px solid #aaa;
border-radius: 3px;
}
[type="checkbox"]:checked .checked { /*появление галочки при нажатии на label*/
content: '✔';
display: block;
font-size: 18px;
line-height: 0.8;
color: #989898;
transition: all .2s;
}
/* и собственно выравнивание */
.my-checkbox {
display: flex;
align-items: center;
}
