Css 左对齐自定义复选框并将文本居中放置在Div内（输入+Div）

提前感谢你的帮助

所以我有自定义的复选框输入。单击标签或输入时，div的边框和标签文本将更改颜色，并显示复选框

唯一的问题是，我需要将复选框向左对齐，而文本保持居中，无论当前复选框处于何种状态，当选中复选框时，标签都会跳到右侧。你知道如何将复选框移到左边，使文本居中，保持静止吗

这是我的密码：

CSS:

HTML:

---

将绝对位置添加到输入：选中+div:之前。。。像这样：

input:checked + div:before {
content: "\2713";
position: absolute;
margin-left: -50px;
}

---

是否可以在输入：checked+div:before上设置一个类？基本上，我有两列输入，两列的复选框出现在同一个位置。我最终将右列中的div更改为span，并定义了span和输入状态。很好，但如果有更好的方法，我很想学习！

<input id="lists[Travel]" type="checkbox" name="lists[Travel]" />
<div class="label">
<label for="lists[Travel]">Travel</label><br>
</div> 

input:checked + div:before {
content: "\2713";
position: absolute;
margin-left: -50px;
}